同じ行にヘッダと無秩序のリストを入れようとしています

これを尋ねる馬鹿みたいな気がして、インターネットを調べて何か答えを探していて、何も見つけられなかったようです。同じ行にヘッダと無秩序のリストを入れようとしています

私がしようとしているのは、両方の特定の余白を取り消さずに、同じ行に自分のヘッダー要素と並べ替えられていないリストを持つことだけです。

h3 { 
 
    text-align: left; 
 
    margin: 40px 0px 0px 40px; 
 
    } 
 

 
    ul { 
 
    text-align: right; 
 
    } 
 

 
    ul li { 
 
    list-style: none; 
 
    display: inline; 
 
    margin: 0px 20px 0px 0px; 
 
    }

<body> 
 
     <h3 id="header"> Darius Spady </h3> 
 
     <ul> 
 
     <li> About </li> 
 
     <li> Projects </li> 
 
     <li> Contact </li> 
 
    </ul> 
 
    </body>

任意の助けいただければ幸いです！ありがとうございました！

出典

2017-03-22 imdarius

主な問題は、要素の基礎としなければならないとして、あなたは、おそらく特定の何かを見つけることができませんでした表示;ブロック対インライン。 'h3'、' ul'、 'li'はブロックレベルの要素ですが、常に親要素の全幅を占めます。このため、常に新しい行（前の要素の下）から開始します。あなたの 'text-align'の使用に基づいて、' float'や 'flexbox'について、それらの要素をページの左側と右側（要素を含む）に適切に整列させることを学びたいと思うようです。 – hungerstar

私は親要素を導入し、利用可能な空白で区切られた同じ行に配置するのにdisplay: flex; justify-content: space-between;を使用します。 align-itemsを使用すると、縦方向にも同様に整列させることができます。

* {margin:0;padding:0;} 
 

 
ul li { 
 
    list-style: none; 
 
    display: inline; 
 
    margin: 0px 20px 0px 0px; 
 
} 
 

 
h3 { 
 
    margin: 40px 0px 0px 40px; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: baseline; 
 
}

<header class="flex"> 
 
    <h3 id="header"> Darius Spady </h3> 
 
    <ul> 
 
    <li> About </li> 
 
    <li> Projects </li> 
 
    <li> Contact </li> 
 
    </ul> 
 
</header>

出典

2017-03-22 21:45:41

ありがとうございました！これは私が答えがシンプルだと知っているものの一つですが、私はそれを理解できません。もう一度おねがいします。 – imdarius

@imdariusあなたは大歓迎です:) –

あなたは、ブートストラップを使用して検討することと、あなたが必要なものを達成するために本当に簡単になります。

<!-- Using Bootstrap --> 
     <div class="row"> 
      <div class="col-md-4"> 
       <h3>Darius Spady</h3> 
      </div> 
      <div class="col-md-4"> 
       <ul class="list-group"> 
        <li class="list-group-item">About</li> 
        <li class="list-group-item">Projects</li> 
        <li class="list-group-item">Contact</li> 
       </ul> 
      </div> 
     </div>

またはあなたがそうなスタイルでプレイする必要はありません、テーブルを使用することができます...

<!-- HTML only --> 
     <table> 
      <tr> 
       <td> 
        <h3>Darius Spady</h3> 
       </td> 
       <td> 
        <ul> 
         <li> About </li> 
         <li> Projects </li> 
         <li> Contact </li> 
        </ul> 
       </td> 
      </tr> 
     </table>

出典

2017-03-22 21:57:49

同じ行にヘッダと無秩序のリストを入れようとしています

答えて

関連する問題