1

我无法将 CSS 包含到单个 div 中而不会打乱所有内容。我正在尝试将医院/名称/标题/部门放在单独的行（垂直）上，对齐的文本框然后分别在同一行上的其他部分（水平）

任何帮助将不胜感激

<div class="main" id="boxalign">
            <p>
                <label>Hospital:</label> <input type="text"/><br>       
                <label>Name:</label> <input type="text"/><br>
                <label>Title:</label> <input type="text"/><br>  
                <label>Department:</label> <input type="text"/><br>
            </p>
         </div>

CSS

#boxalign, label p{
display: inline-block;
float: left;
clear: left;
width: 70px;
text-align: right;

}

不确定我的问题是否真的显示在上面的代码中，所以所有内容都在 jsfiddle 中：http: //jsfiddle.net/f8qa2/

4

5 回答 5

2

我认为您的 CSS 选择器格式不正确，请尝试以下操作：

#boxalign label p {
    display: inline-block;
    float: left;
    clear: left;
    width: 70px;
    text-align: right;
}

此外，不要使用<br>s 来换行，而是将每个<label>/<input>对放在它自己的<p>：

<div class="main" id="boxalign">
    <p>
        <label>Hospital:</label>
        <input type="text" />
    </p>
    <p>
        <label>Name:</label>
        <input type="text" />
    </p>
    <p>
        <label>Title:</label>
        <input type="text" />
    </p>
    <p>
        <label>Department:</label>
        <input type="text" />
    </p>
</div>

小提琴

于 2013-10-22T16:19:30.843 回答
1

我不认为你打算把那个逗号放在那里，没有它一切看起来都很好。

#boxalign label p{
    display: inline-block;
    float: left;
    clear: left;
    width: 70px;
    text-align: right;
}

关联

#boxalign, label p表示您要定位带有 idboxalign和p标签的元素labels。

#boxalign label p表示您希望使用带有 id 的父元素来定位p标签。labelsboxalign

于 2013-10-22T16:19:06.907 回答
0

我认为你只有一个 rouge ，而你的 p 和 label 在你的选择器中是错误的。

尝试

#boxalign p label{
display: inline-block;
float: left;
clear: left;
width: 70px;
text-align: right;
}

这里的例子

于 2013-10-22T16:18:21.010 回答
0

你的选择器是错误的。应该是#boxalign p label {}。

label并且p根据您的 HTML 以错误的方式进行舍入。

于 2013-10-22T16:21:06.770 回答
0

从 css 选择器中删除 unceccesary ","。

希望有帮助。

于 2013-10-22T16:25:46.477 回答