CSS，如何创建最长包含文本的标签宽度？答案

【问题标题】：CSS, how to create a label width of the longest containing text?CSS，如何创建最长包含文本的标签宽度？
【发布时间】：2012-02-17 09:01:27
【问题描述】：

我有一个包含两列的表格，如下所示：

Firstname: Jeff

第一列是标签，第二列是输入。现在我将标签的宽度设置为 180 像素，但如果我有更大的文本（大于 180 像素的一个单词），它不会完全显示。

我尝试在 css 中将标签的宽度设置为“自动”，但我不希望同一列中的标签宽度不同。

结果应该是这样的：

Firstname:    Jeff
Enciclopedia: Yes
Town:         Tokyo

如何用 Css 解决这个问题？

非常感谢，

杰夫

【问题讨论】：

标签： html css

【解决方案1】：

您必须将每个标签输入组合包装在一个元素中，然后将该元素包装在某个容器中。这个容器应该有一个min-width 和display: inline-block;。然后让所有输入项向右浮动，就完成了。

这产生了一个非常简单、干净和语义化的标记，具有同样干净和可维护的 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，因为标签/输入组合是语义单元，而表单是必须按逻辑顺序填写的字段列表。

同样，您可以避免使用字段集、列表和所有内容，仍然可以达到预期的效果，但从语义上讲，至少让字段集带有标签是有意义的。

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, 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> 直接放在表单下方，因此您不必为每个字段集重复它。我个人觉得这不知何故.. 令人不快，但由于您希望有最少的标记，这将工作得很好，并且可以非常访问。如果您还没有，请再次阅读this article。它为正确标记表单提供了一些深刻的见解。

哦，这里可以看到“现实生活”的例子：http://fiddle.jshell.net/ramsesoriginal/b6Taa/9/show/

你可以在这里玩它： http://jsfiddle.net/ramsesoriginal/b6Taa/9/

编辑：我更新了最后一个示例

我的代码中有错误。包装器元素（第二个和最后一个示例中的 <li>，最小的 <label> 和第一个中的 <p> 底部应至少有 1 个像素的边距，否则某些浏览器会看到输入字段重叠，不会正确浮动。我更新了最后一个示例，以便它在那里工作，在其他任何地方你都应该记住这一点。

【讨论】：

我的问题是它添加了大量的标记。这是个人的事情，但我可以通过使用“渐进增强的 JavaScript”来减少标记量。警告：使用分析，因为它可能会根据字段的数量而变慢。
它不添加标记？最多一个包装标签，如果愿意，您甚至可以避免这种情况（但从语义上讲，它会很好，因为标签和输入组成了一个语义实体）..
我更新了我的答案以包含一个“现实生活”示例，其中包含一些额外的信息和良好的标记（保持在最低限度但在语义上仍然正确）
多么棒的答案并坚持到底。来这里说的！
我们可以把<fieldset>标签放在<ol>/<ul>标签里面吗？直到，我真的很震惊。我认为<li> 是<ol> 或<ul> 中唯一可接受的标签？ developer.mozilla.org/en-US/docs/Web/HTML/Element/ol 表示“允许的内容”为“零个或多个
元素”。哪个是正确的？