1
我正在嘗試使一個綠色div位於灰色中間的搜索欄(請參閱http://codepen.io/anon/pen/LRBEvq?editors=1100)以及複選框,選擇下拉菜單和輸入字段全部內聯有兩個按鈕 - 所以一切都在同一行。我正在使用Bootstrap使其響應,但卡住,無法弄清楚..謝謝你的所有幫助!在搜索欄中內嵌複選框和輸入字段
這裏是我的html:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container">
<div class="main">
<div class="formContainer">
<div class="col-md-12">Lorem lorem lorem
<div class="pull-right">Ipsum lorem ipsum</div>
</div>
<div class="row mainContent">
<!-- mainContent -->
<div class="col-md-7">
<!-- main content -->
<div class="checkbox">
<span class="choice-details">
<label class="checkbox-inline">
<input type="checkbox" value="" checked>Lorem
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Ipsum
</label>
</span>
</div>
<div class="choice-select">
<select class="form-control">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
<div class="choice-input">
<input type="text" placeholder="Placeholder text">
</div>
</div>
<div class="col-md-5">
<button>Lorem ipsum lorem</button>
<button>Lorem lorem lorem</button>
</div>
<!-- end main content -->
</div>
<!-- end mainContent -->
</div>
</div>
</div>
這是我的CSS:
.main {
background-color: grey;
width: 1202px;
height: 156px;
margin: 0 auto;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
}
button {
height: 37px;
width: 160px;
}
.choice {
background-color: lightgrey;
height: 37px;
}
.checkbox {
width: 207px;
border: 1px solid white;
}
.choice-select {
width: 173px;
}
.choice-input {
width: 390px;
}