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

您必须将每个标签输入组合包装在一个元素中,然后将该元素包装在某个容器中.此容器应具有最小宽度,并显示：inline-block ;.

然后你让所有的输入项浮动到右边,你已经完成了.

这导致了一个非常简单,干净和语义标记与eqaully清洁和可维护的CSS,没有JavaScript,jQuery或其他花哨的东西的要求.

你可以这样做：

lorem

ipsum

li

与css

fieldset {

min-width: 100px;

display: inline-block;

}

fieldset input{

float: right;

}

Here你可以看看这个样子.

很明显,您可以使用边距,边距等来设计您的表格.

另外,如果你想有一个语义上更准确的包装,you can use a ordered list.然后你可以调整一切,就像你想要的,甚至还有一个很好的附加包装(< ol>),你可以使用,而不添加语义垃圾.

一个例子是：

First Example:

1. lorem
2. ipsum
3. li

Second Example:

1. a
2. b
3. c

Third Example:

1. XXXXXXXX
2. YYYYYYYYYYYY
3. z

风格由

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;

}

编辑显示如何不添加标记

使用以下html：

lorem

ipsum

li

和以下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

1. is semantically correct too,因为标签/输入组合是语义单位,并且形式是必须以逻辑顺序填充的字段的列表.

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

EDIT2：这是一个具有良好语义标记的“真实”注册表单可能如下所示：

Account

UsernamePassword

Personal Data

NameSurnameDate of birth Please input the date of birth in the following format: YYYY-MM-DD

Contact Information

E-mailTelephone number

pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />Please input the telephone number in the following format: (555) 555-5555

Website

和造型：

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如果你没有.它提供了一个很好的洞察,正确地标记一个表单.

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

我的代码出现错误.封装元素(第二个和最后一个例子中的< li>中,最小的< label>中的< label>和第一个中的< p>应该在底部至少具有1个像素边缘,否则一些浏览器看到输入字段是重叠的,不会使它们正确浮动,我更新了最后一个例子,使它在那里工作,其他地方你应该记住这一点.