我正在尝试制作一个面板,其中的按钮在下栏中并排排列:
但是我不知道该怎么做。
这是我的代码
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
color: white;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
margin: 0 auto;
display: inline-block;
}
input[type=submit]:hover {
background-color: #45a049;
display: block;
margin: 0 auto;
}
.container {
border-radius: 5px;
background-color: #23364B;
padding: 20px;
display:inline-block;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* this is for when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
body {
background-color:#23364B;
color: white;
text-align: center;
}
a:link, a:visited {
background-color: #4CAF50;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
float: right;
border: none;
border-radius: 4px;
}
a:hover, a:active {
background-color: #4CAF50;
}
<body>
<h2>Some title</h2>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">key 1</label>
</div>
<div class="col-75">
<input type="text" id="some" name="somethig" placeholder="some text">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">key2</label>
</div>
<div class="col-75">
<input type="text" id="some again" name="more something" placeholder="more text">
</div>
</div>
<div class="row">
<input type="submit" value="action 1">
</div>
<div class="row">
<input type="submit" value="action 2">
</div>
<div class="row">
<input type="submit" value="action 3">
</div>
<div class="row">
<input type="submit" value="action 4">
</div>
<div class="row">
<input type="submit" value="action 5">
</div>
<div class="row">
<input type="submit" value="action 6">
</div>
</form>
</div>
<a href="1.html">1</a>
</body>
我猜测@media屏幕,css上的.col-25和.col-75语句陷入混乱,但同时我也看不到如何做,因为这仅在我内部的空间分配中起作用(我认为)文字区域,标签和按钮,但不在此元素之外。
更新 css中提到的语句无关。
答案 0 :(得分:1)
div
是块级元素,将元素放置在div
内通常会将其移至下一行。在您的情况下,可以使用css网格系统。并定义您希望有多少列
.button-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
<h2>Some title</h2>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">key 1</label>
</div>
<div class="col-75">
<input type="text" id="some" name="somethig" placeholder="some text">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">key2</label>
</div>
<div class="col-75">
<input type="text" id="some again" name="more something" placeholder="more text">
</div>
</div>
<div class="button-container">
<input type="submit" value="action 1">
<input type="submit" value="action 2">
<input type="submit" value="action 3">
<input type="submit" value="action 4">
<input type="submit" value="action 5">
<input type="submit" value="action 6">
</div>
</form>
</div>
<a href="1.html">1</a>