0

CSS リストを組み込んだ HTML フォームを作成しました。ただし、以下のHTMLフォームの「姓」フィールドの後と「確認」フィールドの後に10ピクセル程度追加したいと思います。これは可能ですか？ 

<form>
<ul>
<li><label for="firstName">First Name:</label></li>
<li><input type="text" name="firstName" size="35" id="firstName"/></li>
<li><label for="lastName">Last Name:</label></li>
<li><input type="text" name="lastName" size="35" id="lastName"/></li>

<li><label for="passid">Password:</label></li>
<li><input type="password" name="password" size="35" id="password"/></li>
<li><label for="confirmation">Confirmation:</label></li>
<li><input type="password" name="confirmation" size="35"id="confirmation"/></li>

<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="35" id="email"/></li>
</ul>
</form>

次のようないくつかの CSS と HTML の変更を行いましたが、効果はありませんでした。

form ul li.extra
{
    margin-bottom:15px;
}

<li class="extra"><label for="lastName">Last Name:</label></li>
<li class="extra"><input type="text" name="lastName" size="35" id="lastName"/></li>

HTML の改行など、より単純なことも試しましたが、ページのレイアウトには何の影響もありませんでした。

個々のリスト項目の margin-bottom プロパティを調整することは可能ですか?

ありがとうございました！

4

2 に答える 2

2

li にクラスを設定します。

HTML:

<ul>
   <li>1</li>
   <li>2</li>
  <li>3</li>
  <li class="extra">4</li>
  <li>5</li>
</ul>

CSS:

ul li.extra{
    margin-top:15px;
}
于 2012-08-10T15:15:29.633 に答える
1

理想的ではありませんが、簡単な方法は、関心のあるLIのインラインスタイルを設定することです。

<li style="margin-bottom: 15px;">Whatever</li>

しかし、より良い方法は、クラスを追加することです。これは、他の個々のLIタグに適用するのが明らかに簡単です。

li.single_li {
    margin-bottom: 15px;
}

<li class="single_li">Whatever</li>

動作しない場合は、親クラス/スタイルによってオーバーライドされている可能性があります。css/スタイルで次のことを試してください。

CSS

li.single_li {
    margin-bottom: 15px !important;
}

列をなして

<li style="margin-bottom: 15px !important;">Whatever</li>

！importantを追加すると、親クラスによって上書きされずに適用されるようになります。

インラインスタイルのjsFiddleの例を追加しました

于 2012-08-10T15:11:52.263 に答える