在引导程序中均匀间隔窗体的元素

我有以下待办事项列表 Web 应用程序，我正在尝试将两个输入和按钮均匀地间隔开。但是我无法通过检查表单中的元素来确定哪个元素具有进一步按下按钮的边距或填充。该表单具有三个元素，两个输入和一个按钮。我希望三个均匀分布。如果你能让我知道如何解决这个问题，感激不尽。

链接到网络应用程序：http://pctechtips.org/apps/todo/

法典：

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;
}

<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>

在您的班级.add-item中，您正在以EM单位应用font-size，我认为这是问题所在。指定 EM 时计算字体大小的方式可能会导致不一致的"堆叠"问题，其中字体大小的增大或减小远远超过预期。

删除此声明或将其从 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>

那是因为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>

似乎 .add-item 类操作了按钮。

你可以试试

.css：

.test {
    font-size: 1rem;
}
.test button {
    font-size: 1em;
}

Html(用：

<div class="test">
    <button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</div>

相关内容

最新更新

热门标签：