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

我想知道如何使这两个方形文本框并排放置，而不是相互重叠

CSS

HTML

使用显示：内联块；谢谢你的意见

而且，我认为你不了解课堂是如何运作的。textbox与textbox1完全不同，它们不会共享任何属性。如果您希望单独设置每个CSS属性，那么您应该在CSS中使用使用textbox1的ID，而不是.textbox1。我建议将所有常用样式（如边框、轮廓、高度，也许还有半径）放入应用于每个输入的类中，并使用ID分别设置这些样式。另一个选项是使用属性contains选择器，如[class*=textbox]，它将选择类名中包含textbox的所有元素

，假设您需要每个输入上的边界半径。如果没有，只需将其从textbox类中移出，并将其放在第一部分

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

<input class="textbox"type="text"> 
<input class="textbox1"type="text"> 
<input class="textbox2"type="text">