我有以下todolist网络应用程序，我试图均匀地分隔两个输入和按钮。但我无法通过检查表单中的元素来确定哪个元素有一个边距或填充按钮进一步按下按钮。表单有三个元素两个输入和一个按钮。我希望三者均匀分布。如果你能告诉我如何解决这个问题。
指向webapp的链接：http://pctechtips.org/apps/todo/
代码：
class ApplicationRecord < ActiveRecord::Base
def self.translate_enum(enum)
self.send(enum.to_s).map do |key, value|
{ self.human_enum_name(enum, key) => value }
end.reduce(:merge)
end
end
class EnumerableObject < ApplicationRecord
enum sales_exception: { without: 0, income: 1, commitment: 2, restriction: 3 }, _suffix: true
end
EnumerableObject.translate_enum(:sales_exception)
=> {"Sem Exceção"=>0, "Exceção Renda"=>1, "Exceção Comprometimento"=>2, "Exceção Restrição"=>3}
body {
margin: 0 auto;
height: 100vh;
color: white;
/*display: flex;*/
background: linear-gradient(to bottom right, #6a176a, #7c811b) 100% no-repeat;
}
.navbar-brand {
color: white;
}
.add-item {
font-size: 2em;
margin: 0 auto;
border-radius: 30px;
}
.list-group {
color: gray;
font-size: 18px;
}
答案 0 :(得分：1)
在您的班级.add-item中，您正在申请EM单位font-size，我认为这是问题所在。指定EM时计算字体大小的方式会导致不一致的堆叠＆＃39;字体大小增加或减少的问题远远超过预期。
删除此声明或将其从2em更改为2rem可解决此问题。
body {
margin: 0 auto;
height: 100vh;
color: white;
/*display: flex;*/
background: linear-gradient(to bottom right, #6a176a, #7c811b) 100% no-repeat;
}
.navbar-brand {
color: white;
}
.add-item {
font-size: 2rem;
margin: 0 auto;
border-radius: 30px;
}
.list-group {
color: gray;
font-size: 18px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class=" add-item text-white text-center border col-sm-12 col-md-10 col-lg-8 mb-4">
<a class="new-todo text-white text-center" href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Enter new todo item</a>
<div class="add-item text-center col-sm-12 col-md-12 col-lg-8">
<form class="mb-4">
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Todo Title">
</div>
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Todo Description">
</div>
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</form>
</div>
</div>
</div>
答案 1 :(得分：0)
那是因为form.mb-4有计算line-height:96px。将其重置为1.5rem可解决问题：
body {
margin: 0 auto;
height: 100vh;
color: white;
/*display: flex;*/
background: linear-gradient(to bottom right, #6a176a, #7c811b) 100% no-repeat;
}
.navbar-brand {
color: white;
}
.add-item {
font-size: 2em;
margin: 0 auto;
border-radius: 30px;
}
.list-group {
color: gray;
font-size: 18px;
}
form.mb-4 {
line-height: 1.5rem;
}<title>TodoList App</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
<a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
</nav>
<!-- /navbar -->
<!-- todoList -->
<div class="container">
<div class=" add-item text-white text-center border col-sm-12 col-md-10 col-lg-8 mb-4">
<a class="new-todo text-white text-center" href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Enter new todo item</a>
<div class="add-item text-center col-sm-12 col-md-12 col-lg-8">
<form class="mb-4">
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Todo Title">
</div>
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Todo Description">
</div>
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</form>
</div>
<!-- horizontal line -->
<hr>
<!-- list items -->
<h1 class="heading-4">Todo List Items</h1>
<ul class="list-group mt-4 pb-4">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
</div>
答案 2 :(得分：0)
似乎.add-item类操纵按钮。
你可以尝试
的CSS：
.test {
font-size: 1rem;
}
.test button {
font-size: 1em;
}
Html（用a包装内容）：
<div class="test">
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</div>