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

Question

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

Firstname: Jeff

其中第一列是标签，第二列是输入。现在我将标签的宽度设置为 180px，但是如果我有更大的文本(一个字大于 180px)，它就不会完全显示。

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

结果应该是这样的:

Firstname:    Jeff
Enciclopedia: Yes
Town:         Tokyo

如何使用 Css 解决这个问题？

非常感谢，

杰夫

Answer 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 .你甚至可以在这个 fiddle 上玩弄它: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 个像素的边距，否则某些浏览器会看到输入字段重叠并且不会正确 float 它们。我更新了最后一个示例，以便它在那里工作，在其他任何地方你都应该记住这一点。