gpt4 book ai didi

html - 如何创建一个 2 列来分隔表单中的标签和输入元素

转载 作者:行者123 更新时间:2023-11-28 04:08:40 26 4
gpt4 key购买 nike

我的表格看起来像:

**

    <p><label>first name</label><input type=text name=fn /></p>
<p><label>last name</label><input type=text name=ln /></p>

</div>
<div id="rightform">
<p><label>state</label><input type=text name=state /></p>
<p><label>city</label><input type=text name=city /></p>

</div>

**

我想要这样的布局,所有标签都在左侧对齐(标签文本右对齐),输入框全部对齐,向左浮动。

所以表单应该是这样的:

          asdf-label INPUTBOX
123-label INPUTBOX
yet-another-label INPUTBOX

上面的表格右边会有另外一个表格(id=#rightform)

真的很困惑如何正确地做到这一点......

最佳答案

我个人很少使用 float 技术,尽管它很常见。原因:对于更复杂的情况,它非常脆弱。

我几乎总是这样做:

<form ...>
<p>
<label for="id1">Label 1</label>
<input id="id1" ... />
</p>
<p>
<label for="id2">Label 2</label>
<input id="id2" ... />
</p>
</form>

和 CSS:

p {
position: relative;
}
label {
position: absolute;
width: 150px;
left: 0;
top: Xpx /* x to align nicely with the baseline of the text in the input */
}
input {
margin-left: 160px;
}

溢出

的多行标签很少出现问题。

为了使其在 IE6 和可能的 IE7 中工作,您需要添加一些东西来提供

hasLayout。缩放:1;做的伎俩,或指定宽度。

关于html - 如何创建一个 2 列来分隔表单中的标签和输入元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2518942/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com