我想知道如何制作它,以便两个方形文本框并排放置在彼此旁边而不是彼此叠加。
CSS
input {
display: block;
box-sizing: border-box;
}
.textbox {
border: 1px solid #848484;
-moz-border-radius-topleft: 30px;
-webkit-border-top-left-radius: 30px;
border-top-left-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
border-top-right-radius: 30px;
border: 1px solid #848484;
outline:0;
height:25px;
width: 300px;
padding-left:20px;
padding-right:20px;
}
.textbox1 {
border: 1px dotted #000000;
outline:0;
height:25px;
width: 150px;
}
.textbox2 {
border: 1px dotted #000000;
outline:0;
height:25px;
width: 150px;
}
HTML
<input class="textbox"type="text">
<input class="textbox1"type="text">
<input class="textbox2"type="text">
答案 0 :(得分:9)
使用display:inline-block;
作为输入
另外,我认为您不了解课程的运作方式。 textbox
与textbox1
完全不同,它们不会共享任何属性。如果您希望单独设置每个CSS属性,则应使用ID(在CSS中使用#textbox1
而不是.textbox1
)。我建议将所有常见样式(例如边框,轮廓,高度,也可能是半径)放在应用于每个input
的类中,并使用ID来单独设置样式。另一个选项是使用属性包含选择器,如[class *= textbox]
,它将选择类名中带有“textbox”的所有元素。
Here's a demo,假设您想要每个输入上的边界半径。如果不这样做,只需将其从textbox
课程中移出并放入#first
部分