Question

我正在尝试对齐标签，输入单选和图标的列表。对齐方式应为：

   Label     Icon
() LongLabel Icon
() Label     Icon

这是我的代码：

div.mygrid {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:5px;
}
div.mygrid > div > label       { text-align:left; }

<div class="mygrid">
  <div>
    <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Long Text #1</label>
    <i>Colum2</i>
  </div>
  <div>
    <label><input type="radio">Label #2</label>
    <i>Colum2</i>
  </div>
  <div>
    <label><input type="radio">Label #3</label>
    <i>Colum2</i>
  </div>  
</div>

我也发现很难定义空间来替换单选按钮的空间：

<label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Long Text #1</label>

任何想法我该如何实现？

Answer 1

如果您不坚持使用Grid，我建议采用与以下类似的解决方案（应该不言自明）。根据需要调整值（"explain": true和width）。

padding

label {
  text-align: left;
  display: inline-block;
  width: 160px;
}
label.L1 {
  padding-left: 30px;
}

input[type="radio"] {
  width: 30px;
  margin: 0;
}
i {
  width: 200px;
}

Answer 2

div.mygrid {
    display:flex;
    flex-direction: column;
}
div.mygrid > div > label       { text-align:left; }

.ml-3 {
margin-left: 17px;
}

<div class="mygrid">
  <div class="ml-3">
    <label>Long Text #1</label>
    <i>Colum2</i>
  </div>
  <div>
    <label><input type="radio">Label #2</label>
    <i>Colum2</i>
  </div>
  <div>
    <label><input type="radio">Label #3</label>
    <i>Colum2</i>
  </div>  
</div>

CSS-在三列中对齐div元素

2 个答案: