Question

我有两个使用相同类的文本框（它们都需要是同一个类）。但是我希望一个文本框在中心浮动而另一个文本框向左浮动，此时它们都向左浮动。我怎样才能做到这一点？

以下是两个文本框：

<input type="text" name="numberAnswer" class="numberAnswerTxt" onkeyup="numberKeyUp(this)" onkeypress="return isNumberKey(event)" onChange="getButtons()" >

<input type="text" name="numberAnswer" class="numberAnswerTxt" onkeyup="numberKeyUp(this)" onkeypress="return isNumberKey(event)" onChange="getButtons()" >

以下是class =“numberAnswerTxt”的css：

.numberAnswerTxt{
    float:left;
    width:40px;
    font-size:14px;
    font-weight:bold;
}

Answer 1

不需要不同的ID或多个类。易于peasy：

.numberAnswerTxt + .numberAnswerTxt {
    display: block; 
    float: none;
    margin: 0 auto;
}

More information about sibling selectors
CSSDesk example

Answer 2

为什么不使用不同的id？类似的东西：

<input type="text" id = "input1" name="numberAnswer" class="numberAnswerTxt" onkeyup="numberKeyUp(this)" onkeypress="return isNumberKey(event)" onChange="getButtons()" >
#input1 {
float:right;
etc..
}

Answer 3

您可以为一个标记组合多个类：

.size {
   width:900px;
   height:300px;
}

.background {
   background-color:red;
}

.leftfloat {
   float:left;
}

和

<div class="size background leftfloat">BOX</div>

Answer 4

您可以使用多个类。

<input type="text" name="numberAnswer" class="numberAnswerTxt floatLeft" onkeyup="numberKeyUp(this)" onkeypress="return isNumberKey(event)" onChange="getButtons()" >

<input type="text" name="numberAnswer" class="numberAnswerTxt" onkeyup="numberKeyUp(this)" onkeypress="return isNumberKey(event)" onChange="getButtons()" >

.numberAnswerTxt{
    width:40px;
    font-size:14px;
    font-weight:bold;
}

.floatLeft {
    float:left;
}

我希望一个文本框向左浮动而另一个文本框浮动中心，但两个文本框都有相同的类

4 个答案: