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;
}

确定这两个输入将采用 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 回答