Question

我正在为每个导航项创建一个带有图标和文本的水平导航。我遇到的问题是包含两行文本而不是一行文本的项目。我试图修改div的填充和高度，该填充的高度和扩展高度高于其他填充，但无济于事。我该如何修改它以在所有导航项目中获得一致的高度，而与文本行无关？

查看小提琴：Here

<div id="dashboard">
    <a class="actions" href="#">
        <div>
            <i class="fas fa-users"></i> <br />Employees
        </div>
    </a>
    <a class="actions" href="#">
        <div>
            <i class="fas fa-pencil-ruler"></i> <br />Check Stats
        </div>
    </a>
    <a class="actions" href="#"">
        <div>
            <i class="fas fa-table"></i> <br />Generate Census
        </div>
    </a>
    <a class="actions" href="#">
        <div>
            <i class="fas fa-paper-plane"></i> <br />Send Forms
        </div>
    </a>
    <a href="#" class="actions" data-toggle="modal" data-target="#deleteClientModal">
        <div>
            <i class="fas fa-trash-alt"></i> <br />Delete
        </div>
    </a>
</div>

.actions:first-child div {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.actions:last-child div {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.actions > div {
  display: block;
  background-color: #fafafa;
  color: #223a5c;
  border: 1px solid #d6d8db;
  padding: 15px 0;
  margin: 0 -6px 20px 0;
  width: 12.5%;
  text-align: center;
  display: inline-block;
}
.actions > div:hover {
  background-color: #f2f2f2;
}
.actions > div i {
  width: 1em;
  font-size: 2em;
}

Answer 1

flexbox解决方案可能看起来像这样：

#dashboard {
  display: flex;
}

div:first-child>.actions>div {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

div:last-child>.actions>div {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.actions>div {
  background-color: #fafafa;
  color: #223a5c;
  border: 1px solid #d6d8db;
  padding: 15px 15px;
  text-align: center;
}

.actions>div:hover {
  background-color: #f2f2f2;
}

.actions>div i {
  width: 1em;
  font-size: 2em;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div id="dashboard">
  <div>
    <a class="actions" href="#">
      <div>
        <i class="fas fa-users"></i> <br />Employees
      </div>
    </a>
  </div>
  <div>
    <a class="actions" href="#">
      <div>
        <i class="fas fa-pencil-ruler"></i> <br />Check Stats
      </div>
    </a>
  </div>
  <div>
    <a class="actions" href="#">
      <div>
        <i class="fas fa-table"></i> <br />Generate Census
      </div>
    </a>
  </div>
  <div>

    <a class="actions" href="#">
      <div>
        <i class="fas fa-paper-plane"></i> <br />Send Forms
      </div>
    </a>
  </div>
  <div>

    <a href="#" class="actions" data-toggle="modal" data-target="#deleteClientModal">
      <div>
        <i class="fas fa-trash-alt"></i> <br />Delete
      </div>
    </a>
  </div>

</div>

HTML-跨内嵌div取得一致的高度

1 个答案: