Question

我试图将复选框与一些具有自定义行高的多行文字的顶部对齐。

我一直在捣乱inline-grid，但在没有固定的保证金抵消的情况下，我无法想出一个很好的方法。

这是我目前的做法：

＆＃13;

.checkbox {
  display: inline-grid;
  grid-template-columns: auto auto;
  line-height: 2;
}
  
 .checkbox input {
   margin-right: 10px; 
 }

＆＃13;

<div style="max-width: 200px">
  <div class="checkbox">
    <input type="checkbox" />
    <label>
        Here is some text that wraps over multiple lines.
    </label>
  </div>
</div>

＆＃13;

任何人都有任何建议/想法吗？

Answer 1

试试这个：

label { line-height: 2; }

label:first-line { line-height: 1; }

＆＃13;

.checkbox {
  display: inline-grid;
  grid-template-columns: auto auto;
  
}
  
.checkbox input {
  margin-right: 10px; 
}

label{
  line-height: 2;
}

label:first-line {
  line-height: 1;
}

＆＃13;

<div style="max-width: 200px">
  <div class="checkbox">
    <input type="checkbox" />
    <label>
      Here is some text that wraps over multiple lines.
    </label>
  </div>
</div>

＆＃13;

Answer 2

您必须在 .checkbox输入 css中添加 margin-top：10px; 。

.checkbox {
  display: inline-grid;
  grid-template-columns: auto auto;
  line-height: 2;
}
  
 .checkbox input {
   margin-right: 10px;
   margin-top: 10px; 
 }

<div style="max-width: 200px">
  <div class="checkbox">
    <input type="checkbox" />
    <label>
        Here is some text that wraps over multiple lines.
    </label>
  </div>
  <div class="checkbox">
    <input type="checkbox" />
    <label>
        Here is some text that wraps over multiple lines.
    </label>
  </div>
</div>

如何将输入与多行文本的顶部对齐？

2 个答案: