1

次のコードがあります。

HTML

<div id=addQuesion">
  <li>
    <label>Text</label>
    <input type="text"/>
  </li>
  <li>
    <label>Try</label>
    <input type="button"/>
  </li>
</div>

CSS

#addQuesion li label {
  position: relative;
  top: 10px;
  left: 10px;
  font-size: 25px;
  border: 1px black solid;
  padding-right: 50px;
}

#addQuesion li input {
  position: relative;
  top: 10px;
  left: 10px;
  width: 400px;
  font-size: 25px;
}

確かに 2 つの入力の幅は 400px ですが、各入力 (テキスト、ボタン) を異なる幅にする方法を尋ねています。

このようなスタイルを使用できることはわかっています<input style="..." />が、CSS を使用する必要があります。また、入力ごとに異なるものを使用できることも知ってい<div>ますが、それらを同じ div に配置したいと考えています。

4

4 に答える 4

9

タイプごとに入力をターゲットに設定できるため、さまざまなスタイルを適用できます。

CSS

/* Text Field */
#addQuesion input[type="text"] {
  width: 200px;
}

/* Button */
#addQuesion input[type="button"] {
  width: 20px;
}

これについて詳しくは、 W3C属性セレクターをご覧ください。

于 2012-05-08T13:02:34.357 に答える
4

属性セレクターを使用します。

#addQuestion li input[type="text"]
{
   /* ... */
}

または

#addQuestion li input[type="button"]
{
   /* ... */
}

これはよくある質問です。

于 2012-05-08T13:00:06.893 に答える
2

各入力にクラスを追加し、クラスごとに異なるスタイルを定義できます。

HTML:

<div id=addQuesion">
    <li>
        <label>Text</label>
        <input class="input1" type="text"/>
    </li>
    <li>
        <label>Try</label>
        <input class="input2" type="button"/>
    </li>
</div>

CSS:

#addQuesion li input.input1{
    width: 400px;
}
#addQuesion li input.input2{
    width: 600px;
}
于 2012-05-08T13:15:04.403 に答える
1

次のようなものを使用できます。

[title]
{
color:blue;
} 

参照

于 2012-05-08T13:02:52.583 に答える