パラグラフとナビをインライン化する方法

Question

navとフッターを同じ行に配置する方法がわかりません。私はリストマージンを変更しようとしましたが、これはうまくいきませんでした。任意の提案

ul { 
 
    margin: auto; 
 
    padding-top: 0; 
 
    text-align: center; 
 
} 
 
li { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href=''>Home</a> 
 
    </li> 
 
    <li><a href=''>About</a> 
 
    </li> 
 
    <li><a href=''>Contact</a> 
 
    </li> 
 
    <li><a href=''>Citations</a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 

 
<footer style="color: white"> 
 
    <pre> 2016-2017 &copy; by Owner</pre> 
 
</footer>

：私は、私は以下のコードで間違ってやっているものを見つけることができませんか？

Answer 1

これはNAVとフッターの要素が同じライン上にレンダリングするために両方できるようになります。あなたがそれらをもブラウザウィンドウまたは領域内でセンタリングされたい場合は

nav, 
footer { 
    display: inline-block; 
} 

、あなたはそれらの周りにラッパー要素を追加し、テキスト整列適用できる：センター;をそのラッパー要素に追加します。

これらのスペースを取り除くには、それに応じて左右のマージンを変更する必要があります。

Answer 2

フッター内のNAVを入れて...

<footer> 
    <nav> 
    <ul> 
     <li><pre> 2016-2017 &copy; by Owner</pre></li> 
     <li><a href=''>Home</a> 
     </li> 
     <li><a href=''>About</a> 
     </li> 
     <li><a href=''>Contact</a> 
     </li> 
     <li><a href=''>Citations</a> 
     </li> 
    </ul> 
    </nav> 
</footer>