CSS，如何创建包含文本的最长的标签宽度？ [英] CSS, how to create a label width of the longest containing text?
问题描述
我有一个包含两列的表格，如下所示：
名字：Jeff
其中第一列是标签，第二列是输入。现在我把标签的宽度设置为180px，但如果我有更大的文本（一个字大于180px），它不会完全显示。
我尝试在css中将标签的宽度设置为'auto'，但我不想在同一列中使用不同宽度的标签。
结果应如下所示：
名字：Jeff
Enciclopedia：是
镇：东京
如何使用Css解决？ p>
非常感谢，
Jeff
您必须在一个元素中包装每个标签输入组合，然后将该元素包装在某个容器中。此容器应该有 min-width 和 display：inline-block; 。
然后你让所有的输入项浮动到右边，你就完成了。
这导致一个非常简单，干净和语义的标记与eqaully清洁和可维护的CSS，并且没有对JavaScript，jQuery或其他奇特的东西的要求。
你可以做一些像：
< form>
< fieldset>
< p>< label for =lorem> lorem< / label>< input type =textid =lorem/>< / p&
< p>< label for =ipsum> ipsum< / label>< input type =textid =ipsum/>< / p&
< p>< label for =li> li< / label>< input type =textid =li/>< / p&
< / fieldset>
< / form>
fieldset {
min-width：100px;
display：inline-block;
}
字段集输入{
float：right;
}
在这里你可以看到这看起来。
显然，你可以使用边距，paddings等来设置表单的样式。
此外，如果你想有一个语义上更准确的包装，您可以使用有序列表。然后你可以对所有你想要的样式进行样式，甚至还有一个很好的附加包装器（< ol> ），你可以使用而不添加语义垃圾。
例如：
< form>
< fieldset>
< legend>第一个示例：< / legend>
< ol>
< li>< label for =lorem> lorem< / label>< input type =textid =lorem/>< / li>
< li>< label for =ipsum> ipsum< / label>< input type =passwordid =ipsum/>< / li>
< li>< label for =li> li< / label>< input type =textid =li/>< / li>
< / ol>
< / fieldset>
< fieldset>
< legend>第二个示例：< / legend>
< ol>
< li>< label for =a> a< / label>< input type =textid =a/>< / li>
< li>< label for =b> b< / label>< input type =numberid =b/>< / li>
< li>< label for =c> c< / label>< input type =rangeid =c/>< / li>
< / ol>
< / fieldset>
< fieldset>
< legend>第三个示例：< / legend>
< ol>
< li>< label for =XXXXXXXX> XXXXXXXX< / label>< input type =emailid =XXXXXXXX/>< / li>
< li>< label for =YYYYYYYYYYY> YYYYYYYYYYY< / label>< input type =searchid =YYYYYYYYYYYY/>< / li>
< li>< label for =z> z< / label>< input type =textid =z/>< / li>
< / ol>
< / fieldset>
< / form>
样式为
code> fieldset {
border：1px solid silver;
margin：10px;
padding：10px;
min-width：100px;
display：inline-block;
}
fieldset li {
width：100％;
display：block;
position：relative;
}
字段集标签{
margin-right：10px;
position：relative;
}
字段集标签：after {
content：：;
position：absolute;
right：-0.2em;
}
字段集输入{
float：right;
}
会导致此视图。您甚至可以在这个小提琴上玩耍： http://jsfiddle.net/ramsesoriginal/b6Taa/
编辑以显示如何添加无标记
使用以下html：
< form>
< label for =lorem> lorem< input type =textid =lorem/>< / label>
< label for =ipsum> ipsum< input type =textid =ipsum/>< / label>
< label for =li> li< input type =textid =li/>< / label&
< / form>
和以下CSS：
form {
min-width：100px;
display：inline-block;
}
表单输入{
float：right;
}
表单标签{
display：block;
margin-bottom：2px;
}
您会得到你想要的效果。您可以在这里使用它。但是添加< fieldsets> 和< legend> s不会添加不必要的标记，帮助您对输入进行分组。并添加< ol> 语义也正确，因为标签/输入组合是语义单元，形式是必须以逻辑顺序填充的字段列表。
同样，您可以避免fieldsets列表和一切，仍然达到预期的效果，但语义上至少有一个标签的字段集是有意义的。
EDIT2：这是如何具有良好语义标记的真实注册表可能如下：
< form&
< ol>
< fieldset>
< legend>帐户< / legend>
< li>< label for =username>用户名< / label>< input type =textid =usernamerequired />
< li>< label for =password>密码< / label>< input type =passwordid =passwordrequired />
< / fieldset>
< fieldset>
< legend>个人资料< / legend>
< li>< label for =name> Name< / label>< input type =textid =name/>< / li>
< li>< label for =surname>姓氏< / label>< input type =textid =surname/>< / li>
< li>< label for =dob>出生日期< / label>< input type =datemin =1900-01-01max =2012-02-17 placeholder =YYYY-MM-DDid =dob/>< span class =additionalInfo>请输入出生日期，格式如下：YYYY-MM-DD< / span> / li>
< / fieldset>
< fieldset>
< legend>联系信息< / legend>
< li>< label for =email>电子邮件< / label>< input type =emailid =emailrequired placeholder =example@example.com/> ;< / li>
< li>< label for =tel>电话号码< / label>< input type =telid =telplaceholder =（555）555-5555
pattern =^ \（？\d {3} \）？[ - \s] \d {3} [ - \ s] \d {4}。*？$/> ;< span class =additionalInfo>请输入以下格式的电话号码：（555）555-5555< / span>< / li>
< li>< label for =url>网站< / label>< input type =urlid =urlplaceholder =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;
}
字段集标签{
margin-right：10px;
position：relative;
}
字段集标签：after {
content：：;
position：absolute;
right：-0.2em;
}
字段集输入{
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，0，0.5）;
-moz-box-shadow：5px 5px 5px 5px rgba（0，0，0，0.5）;
box-shadow：5px 5px 5px 5px rgba（0，0，0，0.5）;
z-index：10;
}
fieldset li：hover .additionalInfo {
display：block;
}
我包含了一些额外的信息，一个逻辑实体。同样，你可以包括错误和任何你可能想包括。这只是一个快速的例子，我一起，但它应该显示，你可以用这种技术实现有趣的事情。我还改变了一件事，我把< ol> 直接放在表单下，所以你不必为每个字段重复它。我个人觉得这有点不舒服，但由于你想有最小的标记，这将工作相当不错，将非常可访问。同样，如果没有，请阅读本文。
哦，现实生活的例子可以在这里看到：http://fiddle.jshell.net/ramsesoriginal/b6Taa/9/show/
您可以在这里玩：
http://jsfiddle.net/ramsesoriginal/b6Taa/9/
编辑：我更新了最后一个例子
我的代码中的错误。包装器元素（< li> 在第二个和最后一个例子中，< label> 最小的一个和< p> 在底部应该至少有1像素边距，或者一些浏览器看到输入字段重叠，我更新了最后一个例子，以便它在那里工作，其他地方你应该记住这一点。
I have a table with two columns, like this:
Firstname: Jeff
Where the first column is a label and the second one is an input. Now I'm setting the width of the label at 180px, but if there I have larger text (one word larger than 180px), it's not showed completely.
I've tried to set in css the width of the labels as 'auto', but I don't want different widths of labels in the same column.
The result shall look like this:
Firstname: Jeff
Enciclopedia: Yes
Town: Tokyo
How can I resolve this with Css?
Thanks a lot,
Jeff
You have to wrap each label-input combination in a element, and then wrap that element in some container. This container should have a min-width, and display: inline-block;.
Then you let all the input items float to the right, and you're done.
This results in a very simple, clean and semantic markup with eqaully clean and maintainable CSS, and no requirements for JavaScript, jQuery, or other fancy stuff.
You could make something like:
<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>
with the css
fieldset {
min-width: 100px;
display: inline-block;
}
fieldset input{
float: right;
}
Here you can see how that looks. Clearly you can style your form with margins, paddings etc.
And additionally if you want to have a wrapper that's semantically more accurate, you can use a ordered list. You can then style everything like you want to, and have even a nice additional wrapper (the <ol>) that you can use without adding semantic garbage.
A example would be:
<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>
styled by
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;
}
would result in this view. You can even play around with it on this fiddle: http://jsfiddle.net/ramsesoriginal/b6Taa/
EDIT to show how this adds no markup
With the following 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>
and the following CSS:
form{
min-width: 100px;
display: inline-block;
}
form input{
float: right;
}
form label{
display:block;
margin-bottom: 2px;
}
You get the effect that you want. You can play around with it here. But adding <fieldsets> with <legend>s isn't adding unnecessary markup, on the contrary: it helps you to group the inputs. And adding a <ol> is semantically correct too, since the label/input combinations are semantic units and the form is a list of fields that have to be filled in a logical order.
Again, you can avoid the fieldsets, the lists, and everything and still achieve the desired effect, but semantically it would make sense to have at least the fieldset with a label..
EDIT2: this is how a "real" registration form with good semantic markup may look like:
<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>
and the styling:
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, 0, 0.5);
-moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
}
fieldset li:hover .additionalInfo{
display: block;
}
I included some additional info, to show you how it would all come together to one logical entity. Similarly you could include errors and whatever else you may want to include. This is just a quick example i threw together, but it's should show that you can achieve interesting things with this technique. One thing I also changed was that I put the <ol> directly under the form, so you don't have to repeat it for every fieldset. I personally find this somehow.. unpleasing, but since you want to have minimal markup, this would work pretty well and would be very accessible. Again, read this article if you haven't. It provides some great insight in marking up correctly a form.
Oh, and the "real-life" example is visible here: http://fiddle.jshell.net/ramsesoriginal/b6Taa/9/show/
And you can play with it here: http://jsfiddle.net/ramsesoriginal/b6Taa/9/
EDIT: i updated the last example
There was an error in my code. The wrapper element (the <li>in the second and in the last example, the <label> in the minimal one and the <p> in the first one should have at least 1 pixel margin at the bottom, or else some browsers see the input fields as overlapping and won't float them correctly. I updated the last example so that it works there, everywhere else you should keep this in mind.
这篇关于CSS，如何创建包含文本的最长的标签宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
