Question

我在将CSS包含到单个div中时遇到了麻烦，而没有扰乱所有内容。我试图让医院/名称/标题/ dep在单独的行（垂直）上使用对齐的文本框然后分别在同一行上的其他部分（水平）

非常感谢任何帮助

<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/

Answer 1

我认为你的CSS选择器格式不正确，请尝试这样做：

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

此外，不是使用<br>来断行，而是将每个<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>

Fiddle

Answer 2

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

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

Link

#boxalign, label p表示您希望定位boxalign内标识为p和labels的元素。

#boxalign label p表示您希望使用ID为p的父元素定位labels中的boxalign个代码。

Answer 3

我认为你只是一个流氓，而你的p和标签在你的选择器中是错误的方式。试试

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

示例here

Answer 4

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

label和p根据您的HTML错误排列。

Answer 5

从css选择器中删除unceccesary“，”。

希望有所帮助。

将CSS应用于单个div类/ id

5 个答案: