将单选按钮 3 与 3 对齐并在同一行导出文件

如何解决将单选按钮 3 与 3 对齐并在同一行导出文件

我想将单选按钮 3 与 3 对齐，并将导入文件对齐到同一行但更远，如下面的线框。 我怎么做？ 它们都是同一个表单的一部分。

 <div class="file-import">
            <label>Choose File</label> <input type="file" name="file" id="file" accept=".xls,.xlsx">
        </div>
        <div class="excel-selection">
            <p>Choose file type:</p>
             <input type="radio" id="excel1" name="excel" value="option 1">
            <label for="excel1">option1</label><br>
            <input type="radio" id="excel2" name="excel" value="option 2">
            <label for="excel2">option2</label><br>
            <input type="radio" id="excel3" name="excel" value="option 3">
            <label for="excel3">option3</label><br>
            <input type="radio" id="excel4" name="excel" value="option 4">
            <label for="excel4">option4</label><br>
            <input type="radio" id="excel5" name="excel" value="option 5">
            <label for="excel5">option5</label><br>
            <input type="radio" id="excel6" name="excel" value="option 6">
            <label for="excel6">option6</label><br>
        </div>

布局线框

解决方法

抱歉，我不明白你想要什么文件， 对于每 3 个收音机，我做了这个小代码

编辑：

好的，您有两种方法可以做到，这取决于您的喜好（您有无限但有两种）

第一个：

HTML

<div class="element col1x2">
    <div class="file-import">
        <label>Choose File</label> <input type="file" name="file" id="file" accept=".xls,.xlsx">
    </div>
</div>
<div class="element col1x2">
    <div class="excel-selection">
        <p>Choose file type:</p>
        <div class="element col1x3">
            <input type="radio" id="excel1" name="excel" value="option 1">
            <label for="excel1">option1</label>
        </div>
        <div class="element col1x3">
            <input type="radio" id="excel2" name="excel" value="option 2">
            <label for="excel2">option2</label>
        </div>
        <div class="element col1x3">
            <input type="radio" id="excel3" name="excel" value="option 3">
            <label for="excel3">option3</label>
        </div>
        <div class="element col1x3">
            <input type="radio" id="excel4" name="excel" value="option 4">
            <label for="excel4">option4</label>
        </div>
        <div class="element col1x3">
            <input type="radio" id="excel5" name="excel" value="option 5">
            <label for="excel5">option5</label>
        </div>
        <div class="element col1x3">
            <input type="radio" id="excel6" name="excel" value="option 6">
            <label for="excel6">option6</label>
        </div>
    </div>
</div>

CSS：

.col1x3{
   width: 33%;
}

.col1x2{
    width: 50%;
}

.element{
    margin-right: -0.25em;
    display: inline-block;
}

第二种解决方案是使用 flex：

HTML：

    <div class="main">
    <div class="duo">
        <div class="file-import">
            <label>Choose File</label> <input type="file" name="file" id="file" accept=".xls,.xlsx">
        </div>
    </div>
    <div class="duo">
        <p>Choose file type:</p>
        <div class="excel-selection">
            <div class="element">
                <input type="radio" id="excel1" name="excel" value="option 1">
                <label for="excel1">option1</label>
            </div>
            <div class="element">
                <input type="radio" id="excel2" name="excel" value="option 2">
                <label for="excel2">option2</label>
            </div>
            <div class="element">
                <input type="radio" id="excel3" name="excel" value="option 3">
                <label for="excel3">option3</label>
            </div>
            <div class="element">
                <input type="radio" id="excel4" name="excel" value="option 4">
                <label for="excel4">option4</label>
            </div>
            <div class="element">
                <input type="radio" id="excel5" name="excel" value="option 5">
                <label for="excel5">option5</label>
            </div>
            <div class="element">
                <input type="radio" id="excel6" name="excel" value="option 6">
                <label for="excel6">option6</label>
            </div>
        </div>
    </div>
</div>

CSS：

.main{
    display:flex;
    flex-wrap: wrap;
}

.duo{
    width: 50%;
}

.excel-selection{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

}

.element{
    width: 33%;
}

,

我建议您使用 CSS Grid 来完成此任务。

请注意，我调整了您的 HTML 结构，它可以很好地与网格配合使用。重要的是，每个标签/输入对都是一个网格项。

.centered

.excel-selection {
  display: grid;
  grid-template: auto auto auto /* rows */
                 / auto auto auto auto;  /* columns */
  grid-auto-flow: column;
}

.fill-height {
  grid-row: span 3;
  align-self: center;
}