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

概述我有一个有两列的表,如下所示： Firstname: Jeff 其中第一列是标签,第二列是输入.现在我将标签的宽度设置为180px,但如果我有较大的文本(一个字大于180px),则不会完全显示. 我试图将CSS的宽度设置为“auto”,但是我不想在同一列中使用不同宽度的标签. 结果应如下所示： Firstname: JeffEnciclopedia: YesTown: T 我有一个有两列的表,如下所示：

Firstname: Jeff

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

我试图将CSS的宽度设置为“auto”,但是我不想在同一列中使用不同宽度的标签.

结果应如下所示：

Firstname:    JeffEnciclopedia: YesTown:         Tokyo

如何用CSS解决这个问题？

非常感谢,

杰夫

解决方法 您必须将每个标签输入组合包装在一个元素中,然后将该元素包装在某个容器中.此容器应具有最小宽度,并显示：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;}

你得到@L_301_4@.你可以玩它here.但是添加< fIEldsets>与< legend> s不会添加不必要的标记,恰恰相反：它可以帮助您分组输入.和adding a <ol> is semantically correct too,因为标签/输入组合是语义单位,并且形式是必须以逻辑顺序填充的字段的列表.

再次,您可以避免fIEldets,列表和所有内容,仍然可以达到预期的效果,但语义上至少要具有一个标签的fIEldset是有意义的.

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 >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 >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-@R_403_6004@: 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.5);     -moz-Box-shadow: 5px 5px 5px 5px rgba(0,0.5);     Box-shadow: 5px 5px 5px 5px rgba(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>中的< label>和第一个中的< p>应该在底部至少具有1个像素边缘,否则一些浏览器看到输入字段是重叠的,不会使它们正确浮动,我更新了最后一个例子,使它在那里工作,其他地方你应该记住这一点.

总结

以上是内存溢出为你收集整理的html – CSS,如何创建最长包含文本的标签宽度？全部内容，希望文章能够帮你解决html – CSS,如何创建最长包含文本的标签宽度？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。