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

Question

我想将单选按钮 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>

布局线框

Answer 1

抱歉，我不明白您对文件的要求， 对于收音机 3 per 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%;
}

Answer 2

我建议你使用CSS Grid 来完成这项任务。

请注意，我调整了您的 HTML 结构，它适用于网格。重要的是，每个标签/输入对都是一个网格项。

.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;
}

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