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 pboxalign内の idとpタグを持つ要素をターゲットにすることを意味しますlabels。

#boxalign label pid を持つ親要素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 {}。

labelHTMLにp基づいて間違った方法で丸められます。

于 2013-10-22T16:21:06.770 に答える
0

css セレクターから不要な「,」を削除します。

それが役立つことを願っています。

于 2013-10-22T16:25:46.477 に答える