Question

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

Firstname: Jeff

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

我试图在css中将标签的宽度设置为'auto'，但我不希望在同一列中使用不同宽度的标签。

结果应如下所示：

Firstname:    Jeff
Enciclopedia: Yes
Town:         Tokyo

如何使用Css解决此问题？

非常感谢，

杰夫

Answer 1

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

这导致了一个非常简单，干净和语义的标记，具有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>并不会添加不必要的标记，相反：它可以帮助您对输入进行分组。和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个像素边距，或者某些浏览器将输入字段视为重叠，并且不会正确地浮动它们。我更新了最后一个示例，以便它可以在那里工作，在其他任何地方都应该牢记这一点。

Answer 2

最简单的方法是选择足够大的固定尺寸。

如果您真的想模拟表格的确切行为，您有两种选择：

使用表格

使用CSS模拟表：

.block { display: table; }
.row   { display: table-row; }
label { display: table-cell; }

使用以下HTML：

<div class="block">
  <div class="row">
    <label>...</label><div class="value">...</div>
   </div>
   ...
</div>

我不认为存在另一种解决方法。如果您真的不想更改HTML，那么您唯一的希望就是使用javascript。

Answer 3

简单的解决方案是修复标签的长度，以适应最大的标签（额外增加50px以便你可以居中）并使用text-align:center

这是相同的小提琴.. http://jsfiddle.net/mvivekc/4P58S/

希望它有所帮助。

Answer 4

设置最小宽度，即典型最宽标签的宽度。然后使用JavaScript来处理边缘情况。如果用户没有JavaScript，您可以回退到“OK”设计。

使用this answer中的函数获取表单中最宽的标签，然后将所有标签的宽度设置为该值。

这与this answer设置非常相似，但设置为<li>而不是<label>。

Answer 5

点击并试着看看最大的标签占据了什么。将该宽度指定给所有其他标签。建议您将冒号放在单独的列中。它看起来很干净。

Answer 6

尝试

label{
min-width:180px;
width:auto;
}

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

6 个答案: