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

Question

提问by Jeff Norman

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.

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

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.

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

The result shall look like this:

结果应如下所示：

Firstname:    Jeff
Enciclopedia: Yes
Town:         Tokyo

How can I resolve this with Css?

我怎样才能用 Css 解决这个问题？

Thanks a lot,

非常感谢，

Jeff

杰夫

Answer 1

回答by ramsesoriginal

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.

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

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.

这产生了一个非常简单、干净和语义化的标记，具有同样干净和可维护的 CSS，并且不需要 JavaScript、jQuery 或其他花哨的东西。

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

与 css

 fieldset {
     min-width: 100px;
     display: inline-block;
 }

 fieldset input{
     float: right;
 }

Hereyou 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.

此外，如果您想要一个在语义上更准确的包装器，您可以使用有序列表。然后，您可以按照自己的意愿设置所有内容的样式，甚至还有一个不错的附加包装器 (the <ol>)，您可以使用它而无需添加语义垃圾。

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/

会导致这种观点。你甚至可以在这个小提琴上玩它：http: //jsfiddle.net/ramsesoriginal/b6Taa/

EDIT to show how this adds no markup

编辑以显示这如何不添加标记

With the following html:

使用以下 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:

以及以下 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.

你得到你想要的效果。你可以在这里玩它。但是添加<fieldsets>with <legend>s 并不是添加不必要的标记，相反：它可以帮助您对输入进行分组。并且加入了<ol>语义正确过，因为标签/输入组合是语义单位和形式是有一定的逻辑顺序来填充字段列表。

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:

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="[email protected]" /></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 veryaccessible. Again, read this articleif you haven't. It provides some great insight in marking up correctly a form.

我包含了一些额外的信息，向您展示如何将它们组合成一个逻辑实体。同样，您可以包含错误以及您可能想要包含的任何其他内容。这只是我拼凑起来的一个简单示例，但它应该表明您可以使用这种技术实现有趣的事情。我还改变的一件事是我将<ol>直接放在表单下方，因此您不必为每个字段集重复它。我个人觉得这以某种方式......令人不快，但由于您想要最少的标记，这将非常有效并且非常易于访问。如果您还没有，请再次阅读这篇文章。它为正确标记表单提供了一些很好的见解。

Oh, and the "real-life" example is visible here: http://fiddle.jshell.net/ramsesoriginal/b6Taa/9/show/

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

And you can play with it here: http://jsfiddle.net/ramsesoriginal/b6Taa/9/

你可以在这里玩它：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.

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

Answer 2

回答by yogsototh

The easiest would be to select a fixed size large enough.

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

If you really want to simulate the exact behavior of a table you have two choices:

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

use table

simulate table with CSS:

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

使用表

用 CSS 模拟表格：

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

With the following HTML:

使用以下 HTML：

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

I don't think there exists another way of dealing with this. If you really don't want to change your HTML, your only hope might be to use javascript.

我认为没有其他方法可以解决这个问题。如果你真的不想改变你的 HTML，你唯一的希望可能是使用 javascript。

Answer 3

回答by Vivek Chandra

simple solution would be to fix the length of the label which would accommodate the biggest lable (add some 50px extra so you can center it) and use text-align:center

简单的解决方案是固定标签的长度以容纳最大的标签（添加一些额外的 50px 以便您可以将其居中）并使用 text-align:center

Here's a fiddle for the same.. http://jsfiddle.net/mvivekc/4P58S/

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

hope it helps.

希望能帮助到你。

Answer 4

回答by Dan Blows

Set a minimum width which is the width of the typical widest label. Then use JavaScript to cope for edge cases. If the user doesn't have JavaScript, you can fallback to an 'OK' design.

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

Get the widest label in the form using the function from this answer, and then set the widths of all labels to that value.

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

This is a very similar setup to this answeralthough that one is setting <li>s instead of <label>s.

这是与此答案非常相似的设置，尽管该设置是设置<li>s 而不是<label>s。

Answer 5

回答by sgowd

Hit and try to see what's the greatest label occupying. Assign that width to all other labels. Recommend you to put colons in a separate column. It looks clean.

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

Answer 6

回答by bhaveshkac

try

尝试

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

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

提问by Jeff Norman

回答by ramsesoriginal

回答by yogsototh

回答by Vivek Chandra

回答by Dan Blows

回答by sgowd

回答by bhaveshkac

相关推荐

最近更新

标签

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

提问by Jeff Norman

回答by ramsesoriginal

回答by yogsototh

回答by Vivek Chandra

回答by Dan Blows

回答by sgowd

回答by bhaveshkac

相关推荐

asp.net MVC 的 Html.RadioButton 生成 id 和 name 相同

Html 使用 CSS 在锚点内垂直对齐图像

Html 如何将两个 span 元素一个向左对齐，另一个向右对齐？

Html 如何水平对齐跨度或 div？

相关推荐

最近更新

标签