創建三個字段集的佈局

我目前正在處理由三個字段集組成的頁面的佈局。理想情況下，我希望第一個跨越到100％，另外兩個在50％寬度下並排排列。創建三個字段集的佈局

我不確定我需要做的這個工作。我已經設置了兩個我想要的50％並顯示：inline-block;但是，它們仍然在每行上顯示兩個50％寬度的字段集。

我的代碼：

ul { 
 
\t list-style: none; 
 

 

 
} 
 
a { 
 
\t text-decoration: none; 
 

 

 
} 
 
#inline { 
 
\t width :50%; 
 
\t padding : 0; 
 
\t margin : 0; 
 
\t display : inline; 
 

 
} 
 

 

 
input[type=submit]#loc{ 
 
\t margin-left: 75px; 
 
\t display:inline-block; 
 
} 
 

 
td { 
 
padding: 10px; 
 

 
} 
 

 
label{ 
 
    display: inline-block; 
 
    float: left; 
 
    clear: left; 
 
    width: 250px; 
 
    text-align: right; 
 
} 
 
.input input { 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
.inputAdd input { 
 
    display: inline-block; 
 
    float: right; 
 
}

<div class="container"> 
 
\t \t <div class="main"> 
 
\t \t \t <fieldset class= "spanField"> 
 
\t \t \t \t <legend>Spanned Field</legend> \t \t \t \t \t 
 
\t \t \t \t \t <form method="post" action="index.php" onsubmit="validation();"> 
 
\t \t \t \t \t \t <label>Input 1&nbsp;</label> 
 
\t \t \t \t \t \t <input type="text" size="20"> \t 
 
\t \t \t \t \t \t <label>Input 2&nbsp;</label> 
 
\t \t \t \t \t \t <input type="text" size="20"> \t \t \t \t \t \t 
 
\t \t \t \t \t \t <input type="submit" value="Add" /> 
 
\t \t \t \t \t \t <table style ="display:inline;"> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td></td><td>Input</td><td>Input</td> 
 
\t \t \t \t \t \t </tr> \t 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td><button>X</button></td><td>Input 1</td><td>911 1</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td><button>X</button></td><td>Input 2</td><td>911 2</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t </table> 
 
\t \t \t \t \t </form> 
 
\t \t \t </fieldset><br /> 
 
\t \t \t <fieldset id = "inline" class ="inputAdd"> 
 
\t \t \t \t <legend>Half field</legend> 
 
\t \t \t \t \t <form method="post" action="index.php" onsubmit="validation();"> \t \t \t \t \t 
 
\t \t \t \t \t \t <table> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td></td><td>Input</td> 
 
\t \t \t \t \t \t </tr> \t 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td><button>X</button></td><td>Input 1</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td><button>X</button></td><td>Input 2</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t </table> 
 
\t \t \t \t \t \t <div style ="float:right;"> 
 
\t \t \t \t \t \t <select > 
 
\t \t \t \t \t \t <option>Option 1</option> 
 
\t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t <input type="submit" value="Add" /> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </form> 
 
\t \t \t </fieldset> 
 
\t \t \t <fieldset id="inline" class ="input"> 
 
\t \t \t \t <legend>Half Field</legend> 
 
\t \t \t \t \t <form method="post" action="index.php" onsubmit="validation();"> 
 
\t \t \t \t \t \t <label>Add input&nbsp;</label> 
 
\t \t \t \t \t \t <input type="text" size="20"> \t \t \t \t \t \t 
 
\t \t \t \t \t \t <input type="submit" value="Add" /> 
 
\t \t \t \t \t </form> 
 
\t \t \t \t \t <table> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t <td></td><td>Input</td> 
 
\t \t \t \t \t </tr> \t 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t <td><button>X</button></td><td>Input 1</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t </table> \t \t \t \t \t 
 
\t \t \t </fieldset> 
 
\t \t \t </form> 
 
\t \t </div> 
 
\t \t </div>

來源

2015-11-10 user5166162

的問題是，邊界也計入元素的寬度，所以你的元素是不完全的50％，但多一點。

您可以通過使用CSS box-sizing屬性設置爲border-box解決這個問題：

box-sizing: border-box;

瞭解更多關於w3schools所有可能box-sizing屬性。您還需要浮動元素（css：float: left）。

我還注意到，您使用的是具有相同ID的兩個元素。只有一個元素都應有一個ID，因此，請改變你選擇使用類是這樣的：

.inline { 
    width: 50%; 
    padding: 0; 
    margin: 0; 
    display: inline; 
    box-sizing: border-box; 
    float: left; 
}

，並在你的HTML：

<fieldset class="inputAdd inline">

來源

2015-11-10 19:45:22 Adrian

太謝謝你了！我感謝你的時間和解釋！ – user5166162

創建三個字段集的佈局

回答

相關問題