5

コードが次のようなフォームがあります。

<div id="right_sidebar">

<form id="your_name" name="your_name" action="#" method="post" style="display: block; "> 
    <fieldset>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" value="">
        <label for="lastname">Last Name</label>
        <input type="text" name="lastname" id="lastname">
                <label for="msg"><a href="#" rel="nofollow" id="msg_toggle">Comment <span class="sp"></span></a></label>
        <textarea name="msg" id="msg" rows="7"></textarea>
        <input type="checkbox" name="agree">
        <label for="agree">Accept the terms</label>
                <button class="blue_button" type="submit">Send</button>
    </fieldset>
    </form>

</div>​

また、次の CSS でスタイル設定されています。

body {
color: #333;
font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;
}

#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}

form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}

form label {
color: #435E66;
    display:block;
font-size: 12px;
    }

form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}


form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}

form button.blue_button {
margin-top: 10px;
vertical-align: top;
}

button.blue_button{
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}

ご覧のとおり、チェックボックスはラベルの上にあります。両方を「同じ行に」したいと思います。したがって、「[ ] 条件に同意する」のようになります。そして、テキストがチェックボックスに垂直に配置されるようにするにはどうすればよいですか。

どうすれば両方を行うことができますか?

ここでライブを見ることができます：フォーム、チェックボックスの失敗

4

10 に答える 10

9

1つのオプションはlabel、チェックボックスに続く要素のスタイルを修正することです。

​input[type=checkbox] + label {
    display: inline-block;
    margin-left: 0.5em;
    margin-right: 2em;
    line-height: 1em;
}

JSフィドルデモ。

ただし、marginsは少し恣意的であるため、これはやや脆弱です（そして、これmargin-rightは純粋に次の行を強制するためのものbuttonです）。また、attribute-equalsセレクターは、古いブラウザーで問題を引き起こす可能性があります。

暗示されているように、コメントでは、エイリアン氏は、このセレクター表記を使用してチェックボックス自体をターゲットにする方が実際には簡単です。

input[type=checkbox] {
    float: left;
    margin-right: 0.4em;
}

JSフィドルデモ。

于 2012-11-03T19:57:27.987 に答える
1

ラベルが貼ってあるdisplay: blockからです。これは、（フロートやハックなしで）それが独自の行であると主張することを意味します。
表示ルールを変更するdisplay: inline-blockかそのままにしておけば完了です。

最初の 2 つのラベルに対して意図的にこれを行っていることを確認すると、accept the termsラベルに id を指定して を使用する必要がありますform #accepttermslabel {display: inline-block}。これはより具体的であるため、他のルール et をオーバーライドします。

于 2012-11-03T19:38:16.113 に答える
1

<label>タグ内にチェックボックスとテキストをラップします。このjsFiddle Demoで見られるように、現在の CSS で動作します。

<label for="checkbox">
    ​&lt;input id="checkbox" type="checkbox"> My Label
</label>​​​​​​​​​​​​​​​​​​​​​​​​​​
于 2012-11-03T19:38:50.940 に答える
0

チェックボックスとラベルを揃える最も簡単な方法は次のとおりです。

    .aligned {
        vertical-align: middle;
    }
    <div>
        <label for="check">
            <input class="aligned" type="checkbox" id="check" /> align me 
        </label>
    </div>
    <div>
        <input class="aligned" type="checkbox" />
        <label>align me too</label>
    </div>
    <div>
        <input type="checkbox" />
        <label>dont align me</label>
    </div>

于 2016-07-29T10:16:08.403 に答える
0

次のように、チェックボックス リストにクラスを設定します。

<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList>

次に、次の CSS を追加します。

.FilterCheck td {
    white-space:nowrap !important;
}

これにより、ラベルがチェックボックスと同じ行に留まることが保証されます。

于 2014-02-02T18:02:31.620 に答える
0

1 つの小さな変更を加えて、ここでフィドルをフォークしました。チェックボックスをラベル内にネストしました。

    <label for="agree"><input type="checkbox" name="agree">Accept the terms</label>

それが役に立てば幸い。

于 2012-11-03T19:40:37.423 に答える
0

に追加するだけdisplay: inlineですlabel。このような：

label[for="agree"] {
  display: inline;
}

Sendボタンを独自の行に配置するには、次を追加する必要がある場合もあります。

button[type="submit"] {
  display: block;
}

動作させるにはこれで十分ですが、次のようにをinputネストすることもできます。label

<label for="agree">
  <input type="checkbox" name="agree" />
  Accept the terms
</label>

ただし、ほとんどの人はこれを避けるようにしています。私は最初の方法で行きます。

于 2012-11-03T19:43:58.570 に答える
0

フレックス属性を試しましたか? フレックスが追加された例を次に示します。

  1. HTML

    <div id="right_sidebar">
<form id="send_friend" name="send_friend" action="#" method="post" style="display: block; ">
<fieldset>
    <label for="from">From</label>
    <input type="text" name="from" id="from" value="">
    <label for="to">To</label>
    <input type="text" name="to" id="to">
    <label for="msg"><a href="#" rel="nofollow" id="msg_toggle">Comment <span class="sp"></span></a>
    </label>
    <textarea name="msg" id="msg" rows="7"></textarea>
    <div class="row">
        <div class="cell" float="left">
            <input type="checkbox" name="agree">
        </div>
        <div class="cell" float="right" text-align="left">
            <label for="agree">Accept the terms</label>
        </div>
    </div>
    <button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>

  2. CSS

    body {
    color: #333;
    font: 12px Arial, Helvetica Neue, Helvetica, sans-serif;
}
[class="row"] {
    display: flex;
    flex-flow: row wrap;
    margin: 2 auto;
}
[class="cell"] {
    padding: 0 2px;
}
#right_sidebar {
    padding-top: 12px;
    width: 190px;
    position:relative;
}
form {
    background: #EEF4F7;
    border: solid red;
    border-width: 1px 0;
    display: block;
    margin-top: 10px;
    padding: 10px;
}
form label {
    color: #435E66;
    display:block;
    font-size: 12px;
}
form textarea {
    border: 1px solid #ABBBBE;
    margin-bottom: 10px;
    padding: 4px 3px;
    width: 160px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
form label a {
    display: block;
    padding-left: 10px;
    position: relative;
    text-decoration: underline;
}
form label a .sp {
    background: #EEF4F7;
    height: 0;
    left: 0;
    position: absolute;
    top: 2px;
    width: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #333;
}
form button.blue_button {
    margin-top: 10px;
    vertical-align: top;
}
button.blue_button {
    color: white;
    font-size: 12px;
    height: 22px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
button.blue_button {
    background-color: #76C8C6;
    border: 1px solid #7798B7;
    text-shadow: 1px 1px 0px #567C9E;
}

Flex では、たとえば div を使用してテーブル スタイルを制御できます。

于 2015-09-18T09:05:07.103 に答える