Question

我遇到了css问题。我有一个表单，在里面我想在每一行显示一个标签和一些信息。表单的html是：

<form class="form_dialog">
</br>
<label>Status: </label>
<span><img src="images/check.png" alt="check mark" width="16" height="16"/></span>
</br></br>
<label>Type: </label>
<span>V1</span>
</br></br>
<label>Description: </label>
<div class="sp">16 Nodes - Test for long description.
This system is good in all cases. Max length is 100.</div>
</form>

所有标签的css是：

form.form_dialog {float: left; clear: left;}

.form_dialog div {float:left; clear:left}
.form_dialog label {
    display: block; float: left; 
    width: 12.0em; min-height: 2.0em; text-align: right;
}

.form_dialog span {
    margin-left: 3.0em;
}

div.sp {
     display:inline;
     margin-left:3em;
     margin-right:3em;
     width:70%;
}

我的问题是，对于描述信息，我想保持文本行缩进（每行从相同位置开始）以及内联标签。但无法实现它。任何人都可以帮忙吗？感谢。

Answer 1

您正在创建一个表。你可以使用一个表，或者使用两个单独的元素，并排放在一个包含的内部。

<div class="container">
   <div class="formContainer">
   </div>
   <div class="textContainer">
   </div>
</div>

然后浮动每个容器并使用CSS对齐文本。

Answer 2

同意Trendy，因为你开始使用span标签，你应该只使用span

<span>16 Nodes - Test for long description.
This system is good in all cases. Max length is 100.</span>

如何将<p>内容与<label>？</label> </p>内联

2 个答案: