css Flex对齐基线内容以输入标签

wljmcqd8 于 12个月前发布在其他

关注(0)|答案(2)|浏览(99)

我们目前有一个输入，我们希望将基线与其周围的内容对齐。标签 Package 了输入，并且在大多数情况下，所有内容都正确对齐。然而，我们一直希望将输入拉到标签之外，但这似乎会打乱布局。
这段代码演示了这个问题和可能的解决方案。但是，我想知道是否有更好的选择？或者让基线布局忽略标签的方法？

<h1>Original <span style="font-size: 14px;">(input within label)</span></h1>
<div style="display: flex; flex-direction: row; align-items: baseline; gap: 8px;">
  <div>Test value</div>
  <div>
    <label for="myInput" style="display: inline-block;">
      <div>My label</div>
      <input id="myInput" placeholder="test" />
    </label>
  </div>
  <button>My Button</button>
</div>

<h1>Problem <span style="font-size: 14px;">(splitting label and input breaks layout)</span></h1>
<div style="display: flex; flex-direction: row; align-items: baseline; gap: 8px;">
  <div>Test value</div>
  <div>
    <label for="myInput" style="display: block;">My label</label>
    <input id="myInput" placeholder="test" />
  </div>
  <button>My Button</button>
</div>

<h1>Option 1 <span style="font-size: 14px;">(absolute position the label)</span></h1>
<div style="display: flex; flex-direction: row; align-items: baseline; gap: 8px;">
  <div>Test value</div>
  <div style="position: relative;">
    <label for="myInput" style="position: absolute;">My label</label>
    <input id="myInput" placeholder="test" style="margin-top: 1rem"/>
  </div>
  <button>My Button</button>
</div>

<h1>Option 2 <span style="font-size: 14px;">(float label, but label is outside container)</span></h1>
<div style="display: flex; flex-direction: row; align-items: baseline; gap: 8px;">
  <div>Test value</div>
  <div>
    <label for="myInput" style="position: absolute; transform: translateY(-1rem);">My label</label>
    <input id="myInput" placeholder="test"/>
  </div>
  <button>My Button</button>
</div>

字符串

css

来源：https://stackoverflow.com/questions/77456590/flex-align-baseline-content-to-input-with-label

2条答案

按热度按时间

hk8txs481#

使用“最后基线”代替“基线”

<h1>Original <span style="font-size: 14px;">(input within label)</span></h1>
<div style="display: flex; flex-direction: row; align-items: baseline; gap: 8px;">
  <div>Test value</div>
  <div>
    <label for="myInput" style="display: inline-block;">
      <div>My label</div>
      <input id="myInput" placeholder="test" />
    </label>
  </div>
  <button>My Button</button>
</div>

<h1>Problem <span style="font-size: 14px;">(splitting label and input breaks layout)</span></h1>
<div style="display: flex; flex-direction: row; align-items: baseline; gap: 8px;">
  <div>Test value</div>
  <div>
    <label for="myInput" style="display: block;">My label</label>
    <input id="myInput" placeholder="test" />
  </div>
  <button>My Button</button>
</div>

<h1>Option 1 <span style="font-size: 14px;">(absolute position the label)</span></h1>
<div style="display: flex; flex-direction: row; align-items: baseline; gap: 8px;">
  <div>Test value</div>
  <div style="position: relative;">
    <label for="myInput" style="position: absolute;">My label</label>
    <input id="myInput" placeholder="test" style="margin-top: 1rem"/>
  </div>
  <button>My Button</button>
</div>

<h1>Option 2 <span style="font-size: 14px;">(float label, but label is outside container)</span></h1>
<div style="display: flex; flex-direction: row; align-items: baseline; gap: 8px;">
  <div>Test value</div>
  <div>
    <label for="myInput" style="position: absolute; transform: translateY(-1rem);">My label</label>
    <input id="myInput" placeholder="test"/>
  </div>
  <button>My Button</button>
</div>

<h1>Last baseline <span style="font-size: 14px;">(splitting label and input)</span></h1>
<div style="display: flex; flex-direction: row; align-items: last baseline; gap: 8px;">
  <div>Test value</div>
  <div>
    <label for="myInput" style="display: block;">My label</label>
    <input id="myInput" placeholder="test" />
  </div>
  <button>My Button</button>
</div>

字符串

赞(0）回复(0）举报 12个月前

gev0vcfq2#

是的，有一个更好的选择：网格。网格支持align-items: baseline，这将实现您想要的布局。

body, input, button {
  font-family: sans-serif;
  font-size: 16px;
}

.d1 {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: baseline;
  gap: 5px 1em;
}

.d2 {
  grid-row: 2;
}

.d3 {
  display: contents;
}

.d3>label {
  grid-column: 2;
}

.d3>input {
  grid-column: 2;
  grid-row: 2;
}

.d1>button {
  grid-column: 3;
  grid-row: 2;
}

个字符

赞(0）回复(0）举报 12个月前

我来回答

css Flex对齐基线内容以输入标签

2条答案

相关问题

热门标签

最新问答