如何在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（在你的CSS中使用#textbox1而不是.textbox1）。我建議將所有常見樣式（例如邊框，輪廓，高度，也可能是半徑）放在適用於每個input的類中，並使用ID來單獨設置樣式。另一種選擇是使用屬性包含選擇器，如[class *= textbox]，它將在類名中選擇所有具有「文本框」的元素。

Here's a demo，假設您想在每個輸入上使用邊界半徑。如果不這樣做，只需將其從textbox類中移出並放入#first部分