javascript - 使用 CSS 上下对齐按钮
问题描述
我试图制作一个带有按钮的面板,这些按钮在列中并排排列:
但我不知道该怎么做。
这是我的代码
<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 语句搞砸了,但同时我不知道如何,因为这只会在文本区域内的空间分配中起作用(我认为) 、标签和按钮,但不在此元素之外。
UPDATE 与css中提到的语句无关。
解决方案
Adiv
是块级元素,将元素放在 a 内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>
推荐阅读
- computer-vision - 估计主动光立体系统的深度误差?
- html - 更改以“#”开头的行的 css 属性,例如颜色和背景
- python - 为您的项目存储名称并在模板中调用它
- r - 在 kable 单元格中添加箭头或图形?
- asp-classic - 经典 ASP 的 FPDF 扩展 writetag.ext
- javascript - 使用 for 循环从数组中删除对象而不影响数组的其余部分
- bash - 在 bash 脚本中使用 osascript 提示时增加超时
- javascript - 比较不同的表格并清除匹配的单元格
- swift - UIHostingController 抛出
- c# - 编辑模式下 ASP.NET (C#) 中的 DetailView 使用下拉列表将主键推送到数据库