div内のコンテンツの整列に問題があります

Question

私は、それぞれが.headerクラスと.contentクラスを含む3つのdivのグループを持っています。私はほとんどの場合.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

フレキシボックスを使用してみてください、ここで編集し、あなたの 'ul.nav-ウィザード李' セレクタのバージョンを働いて、期待しています、それは動作します

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 10px;

に padding: 0 20px 0 30px;から ul.nav-wizard liのパディングを変更する必要があります

ボーダーレッドは参考用です。それを除く。これがうまくいきたいです

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