Firstname: Jeff
其中第一列是标签,第二列是输入.现在我将标签的宽度设置为180px,但如果我有较大的文本(一个字大于180px),则不会完全显示.
我试图将CSS的宽度设置为“auto”,但是我不想在同一列中使用不同宽度的标签.
结果应如下所示：
Firstname: Jeff Enciclopedia: Yes Town: Tokyo
如何用Css解决这个问题？
非常感谢,
杰夫
解决方法
然后你让所有的输入项浮动到右边,你已经完成了.
这导致了一个非常简单,干净和语义标记与eqaully清洁和可维护的CSS,没有JavaScript,jQuery或其他花哨的东西的要求.
你可以这样做：
<form>
<fieldset>
<p><label for="lorem">lorem</label><input type="text" id="lorem" /></p>
<p><label for="ipsum">ipsum</label><input type="text" id="ipsum" /></p>
<p><label for="li">li</label><input type="text" id="li" /></p>
</fieldset>
</form>
与css
fieldset {
min-width: 100px;
display: inline-block;
}
fieldset input{
float: right;
}
Here你可以看看这个样子.
很明显,您可以使用边距,边距等来设计您的表格.
另外,如果你想有一个语义上更准确的包装,you can use a ordered list.然后你可以调整一切,就像你想要的,甚至还有一个很好的附加包装(< ol>),你可以使用,而不添加语义垃圾.
一个例子是：
<form>
<fieldset>
<legend>First Example:</legend>
<ol>
<li><label for="lorem">lorem</label><input type="text" id="lorem" /></li>
<li><label for="ipsum">ipsum</label><input type="password" id="ipsum" /></li>
<li><label for="li">li</label><input type="text" id="li" /></li>
</ol>
</fieldset>
<fieldset>
<legend>Second Example:</legend>
<ol>
<li><label for="a">a</label><input type="text" id="a" /></li>
<li><label for="b">b</label><input type="number" id="b" /></li>
<li><label for="c">c</label><input type="range" id="c" /></li>
</ol>
</fieldset>
<fieldset>
<legend>Third Example:</legend>
<ol>
<li><label for="XXXXXXXX">XXXXXXXX</label><input type="email" id="XXXXXXXX" /></li>
<li><label for="YYYYYYYYYYYY">YYYYYYYYYYYY</label><input type="search" id="YYYYYYYYYYYY" /></li>
<li><label for="z">z</label><input type="text" id="z" /></li>
</ol>
</fieldset>
</form>
风格由
fieldset {
border: 1px solid silver;
margin: 10px;
padding: 10px;
min-width: 100px;
display: inline-block;
}
fieldset li{
width: 100%;
display: block;
position: relative;
}
fieldset label{
margin-right: 10px;
position: relative;
}
fieldset label:after{
content: ": ";
position: absolute;
right: -0.2em;
}
fieldset input{
float: right;
}
将导致this view.你甚至可以在这个小提琴上玩耍：http://jsfiddle.net/ramsesoriginal/b6Taa/
使用以下html：
<form>
<label for="lorem">lorem<input type="text" id="lorem" /></label>
<label for="ipsum">ipsum<input type="text" id="ipsum" /></label>
<label for="li">li<input type="text" id="li" /></label>
</form>
和以下CSS：
form{
min-width: 100px;
display: inline-block;
}
form input{
float: right;
}
form label{
display:block;
margin-bottom: 2px;
}
你得到the effect that you want.你可以玩它here.但是添加< fieldsets>与< legend> s不会添加不必要的标记,恰恰相反：它可以帮助您分组输入.和adding a <ol> is semantically correct too,因为标签/输入组合是语义单位,并且形式是必须以逻辑顺序填充的字段的列表.
再次,您可以避免fieldets,列表和所有内容,仍然可以达到预期的效果,但语义上至少要具有一个标签的fieldset是有意义的.
EDIT2：这是一个具有良好语义标记的“真实”注册表单可能如下所示：
<form>
<ol>
<fieldset>
<legend>Account</legend>
<li><label for="username">Username</label><input type="text" id="username" required /></li>
<li><label for="password">Password</label><input type="password" id="password" required /></li>
</fieldset>
<fieldset>
<legend>Personal Data</legend>
<li><label for="name">Name</label><input type="text" id="name" /></li>
<li><label for="surname">Surname</label><input type="text" id="surname" /></li>
<li><label for="dob">Date of birth</label><input type="date" min="1900-01-01" max="2012-02-17" placeholder="YYYY-MM-DD" id="dob" /><span class="additionalInfo">Please input the date of birth in the following format: YYYY-MM-DD</span></li>
</fieldset>
<fieldset>
<legend>Contact information</legend>
<li><label for="email">E-mail</label><input type="email" id="email" required placeholder="example@example.com" /></li>
<li><label for="tel">Telephone number</label><input type="tel" id="tel" placeholder="(555) 555-5555"
pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /><span class="additionalInfo">Please input the telephone number in the following format: (555) 555-5555</span></li>
<li><label for="url">Website</label><input type="url" id ="url" placeholder="http://www.example.com"></li>
</fieldset>
<li><input type="submit" /></li>
</ol>
</form>
和造型：
fieldset {
border: 1px solid silver;
margin: 10px;
padding: 10px;
min-width: 100px;
display: inline-block;
}
fieldset li{
width: 100%;
display: block;
position: relative;
margin-bottom: 2px;
}
fieldset label{
margin-right: 10px;
position: relative;
}
fieldset label:after{
content: ": ";
position: absolute;
right: -0.2em;
}
fieldset input{
float: right;
}
fieldset li .additionalInfo{
position: absolute;
padding: 5px;
margin-top: 5px;
display: none;
background-color: white;
border: 1px solid black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-Box-shadow: 5px 5px 5px 5px rgba(0,0.5);
-moz-Box-shadow: 5px 5px 5px 5px rgba(0,0.5);
Box-shadow: 5px 5px 5px 5px rgba(0,0.5);
z-index: 10;
}
fieldset li:hover .additionalInfo{
display: block;
}
我包括一些额外的信息,以告诉你如何将它们汇集到一个逻辑实体.同样地,您可能会包括错误,以及您可能想要包括的任何其他内容.这只是我投掷一个快速的例子,但它应该表明,你可以用这种技术来实现有趣的事情.我也改变了一件事是我把< ol>直接在表单下,所以你不必为每个字段重复它.我个人觉得这个不合时宜,不合时宜,但是由于你想要拥有最小的标记,这样做会很好,而且非常方便.再次阅读this article如果你没有.它提供了一个很好的洞察,正确地标记一个表单.
哦,“现实生活”的例子可见：http://fiddle.jshell.net/ramsesoriginal/b6Taa/9/show/
你可以在这里玩：
http://jsfiddle.net/ramsesoriginal/b6Taa/9/
编辑：我更新了最后一个例子
我的代码出现错误.封装元素(第二个和最后一个例子中的< li>中,最小的< label>中的< label>和第一个中的< p>应该在底部至少具有1个像素边缘,否则一些浏览器看到输入字段是重叠的,不会使它们正确浮动,我更新了最后一个例子,使它在那里工作,其他地方你应该记住这一点.
