無法在div中對齊內容

Question

我有一組三個div，每個div都包含.header類和.content類。 我基本上已經按.header對齊了.header類，但是在使.content類在標題下方對齊並在所有邊上都有大約10-15px的填充時出現了問題，標題和內容。 這應該有一個簡單的解決方案，但我只是沒有看到它。

  <div class="container">
  <div class="row">
    <section>
      <ul class="nav nav-wizard">
        <li class="active">
          <h5 class="header">
          Header
          </h5>
          <p class="content">
            Lorem ipsum dolorset amicum
          </p>
        </li>
        <li class="active">
          <h5 class="header">
            Header
          </h5>
          <p class="content">
            Lorem ipsum dolorset amicum
          </p>
        </li>
        <li class="active">
          <h5 class="header">
            Header
        </h5>
          <p class="content">
            Lorem ipsum dolorset amicum
          </p>
      </ul>
    </section>
  </div>
</div>

的CSS

li {
  width: 190px;
}

ul.nav-wizard:before {
  position: absolute;
}

ul.nav-wizard li {
  position: relative;
  float: left;
  height: 60px;
  display: inline-block;
  text-align: center;
  padding: 0 20px 0 30px;
  margin: 8px;
  font-size: 16px;
  line-height: 46px;
}

ul.nav-wizard li a {
  color: #428bca;
  padding: 0;
}

ul.nav-wizard li a:hover {
  background-color: transparent;
}

li:last-child:before {
  border-left: 16px #6633cc;
}

li:last-child:after {
  position: absolute;
  display: block;
  border: 31px solid transparent;
  border-left: 16px solid #6633cc;
  border-right: 0;
  top: -1px;
  z-index: 10;
  content: '';
  right: -15px;
}

ul.nav-wizard li.active:nth-child(-n+2) {
  background: #6633cc;
}

.header {
  margin: 0 auto;
  font-weight: bold;
  float: left;
}

p {
  float: left;
}

.content {
  margin: -29px;
  position: relative;
}

ul.nav-wizard .active ~ li {
  color: #999999;
  background: #ddd;
}

ul.nav-wizard .active ~ li:after {
  border-left: 16px solid #ddd;
}

當前的JSFIDDLE： https ：//jsfiddle.net/zfcm2y27/

Answer 1

嘗試使用Flexbox ，這是'ul.nav-wizard li'選擇器的經過編輯且可以使用的版本，希望它能正常工作

 ul.nav-wizard li { position: relative; float: left; height: 60px; display: flex; text-align: center; padding: 0 20px 0 30px; margin: 8px; font-size: 16px; line-height: 46px; flex-direction: column; } 

Answer 2

在您的js小提琴中將您的.content類更改為此：-

.content {
 position: absolute;
 margin-top: 60px;
 border: 1px solid red;
 left: 0;
 width:100%;
}

編輯：-為使文本左移，您需要從padding: 0 20px 0 30px;更改ul.nav-wizard li的padding: 0 20px 0 30px; padding: 0 20px 0 10px;

紅色邊框僅供參考。 去掉它。 希望這可以幫助

Answer 3

我創建了一個樣本。 我在CSS文件中刪除了一些元素調用和位置的重復以及一些浮點數。 這正是您在說的嗎？

的CSS

li {
  width: 190px;
  height: 60px;
  display: inline-block;
  margin: 8px;
  color: #999;
}

li:last-child {
  position: relative;
  background: #ddd;
}

li:last-child:after {
  content: '';
  top: -1px;
  right: -15px;
  position: absolute;
  border: 31px solid transparent;
  border-left: 16px solid #ddd;
  border-right: 0;
}

li.active:nth-child(-n+2) {
  background: #6633cc;
}

.header {
  padding: 0 20px 0 30px;
}

.content {
  text-align: left;
  padding: 15px;
}