gpt4 book ai didi

html - 对齐选择和输入

转载 作者:太空狗 更新时间:2023-10-29 12:36:47 24 4
gpt4 key购买 nike

是否可以不指定宽度大小、不使用表格并使用相同的 HTML 对齐 SELECT 和 INPUT 内联?见图片。现场示例:http://jsfiddle.net/N4hpQ/谢谢。

<html>
<head>
<style>

fieldset {
display: inline-block;
}

fieldset input,
fieldset select{
float: right;
margin-left: 5px;
}

fieldset p {
text-align: right;
}

</style>
</head>
<body>

<fieldset>
<p><label>First Name: </label><input type="text" /></p>
<p><label>Second Name: </label><input type="text" /></p>
<p><label>Country: </label><select><option>Choose</option></select></p>
<p><label>Age: </label><select><option>Choose</option></select></p>
</fieldset>

</body>
</html>

image

最佳答案

您可以使用 css display: table; 来实现这一点。

HTML

<fieldset>
<p>
<label>First Name: </label>
<input type="text" />
</p>
<p>
<label>Second Name: </label>
<input type="text" />
</p>
<p>
<label>Country: </label>
<select>
<option>Choose</option>
</select>
</p>
<p>
<label>Age: </label>
<select>
<option>Choose</option>
</select>
</p>
</fieldset>

CSS

fieldset {
display: table;
}
fieldset p {
display: table-row;
}
fieldset input,
fieldset select,
fieldset label {
display: table-cell;
margin: 3px;
}
fieldset label {
text-align: right;
}

Demo

关于html - 对齐选择和输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13750890/

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