如何在HTML/CSS中并排放置文本框

Question

我想知道如何制作它,使两个方形文本框并排放置,而不是彼此叠加.

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"> 

Answer 1

使用display:inline-block;您的输入

另外,我认为您不了解课程的运作方式.textbox完全不同textbox1,他们不会共享任何属性.如果您希望单独设置每个CSS属性,那么您应该使用ID(#textbox1在CSS中使用而不是.textbox1).我建议将所有常见样式(例如边框,轮廓,高度,也可能是半径)放在应用于每个input样式的类中,并使用ID来单独设置样式.另一个选项是使用属性包含选择器[class *= textbox],它将选择类名中带有"textbox"的所有元素.

这是一个演示,假设你想要每个输入的边界半径.如果不这样做,只需将其从textbox类中移出并放入该#first部分即可