在下面的代码中,我想在1行“搜索”,在下一行的2个单选按钮,“搜索文本”和文本框在第三行和最后一行提交按钮。我用的是flexbox。目前,一切都是在一个单一的线。
body {
background: #ccc;
font-family: 'Garamond', sans-serif;
color: #000080;
}
h2 {
width: 25%;
text-align: center;
margin: auto;
padding: 15px;
}
.mytabs {
display: flex;
/*property of flex container to use flexbox*/
flex-wrap: wrap;
max-width: 1000px;
margin: 25px auto;
}
.mytabs input[type="radio"] {
display: none
}
.mytabs label {
padding: 25px;
font-weight: bold;
background: #e2e2e2;
font-size: 20px;
}
.mytabs .tab {
width: 100%;
background: #fff;
order: 1;
display: none;
}
.mytabs input[type='radio']:checked+label+.tab {
display: block;
}
.mytabs input[type="radio"]:checked+label {
background: #fff;
}
.form-group {
display: flex;
align-items: center;
justify-content: center;
margin: 40px 40px;
font-size: 20px;
}
.form-group input[type="radio"] {
display: block;
}
.form-group label {
padding: 5px;
margin: 5px;
font-weight: normal;
background: #fff;
font-size: 20px;
}
input[type=text] {
padding: 6px 8px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid navy;
border-radius: 4px;
}
<br><br>
<h2>Tool</h2>
<div class="mytabs">
<input type="radio" id="tabfree" name="mytabs" checked="checked">
<label for="tabfree">Tab1</label>
<div class="tab">
<form action="/submitu">
<div class="form-group">
<p>Search By :</p>
<input type="radio" id="user" name="srchusr" value="UserID" checked/>
<label for="user">Option1</label>
<input type="radio" id="group" name="srchusr" value="Group" />
<label for="group">Option2</label>
<label for="srchtxt">Search Text :</label><br>
<input type="text" id="srchtxt" name="srchtxt" value=""><br>
<input type="submit" value="Submit">
</div>
</form>
</div>
<input type="radio" id="tabsilver" name="mytabs">
<label for="tabsilver">Tab2</label>
<div class="tab">
<p>Tab2 Data</p>
</div>
</div>
2条答案
按热度按时间suzh9iv81#
使用
flex-direction:column
使元素垂直而不是水平,并使用display:flex
将一些元素 Package 在div中,以便它们在一行中。在下面的代码片段中,我用“!”突出显示了我对您的代码所做的更改!!”评论。
w51jfk4q2#
你可以使用网格。要构建一个页面或一个表单,网格非常有用。