时间戳

首页 > 解决方案 > 如何将输入与多行文本的顶部对齐？

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

问题描述

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

我一直在搞砸，inline-grid但如果没有固定的边距偏移，我想不出一个好方法来做到这一点。

这是我目前的方法：

.checkbox {
  display: inline-grid;
  grid-template-columns: auto auto;
  line-height: 2;
}
  
 .checkbox input {
   margin-right: 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>

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

标签： htmlcss

解决方案

尝试这个：

label { line-height: 2; }

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


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

label{
  line-height: 2;
}

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

推荐阅读