@media rule - NavBarで新しい行を強制し、以前に右揃えのリンクをこの行に表示しますが、中央揃えにします。

Question

NavBarは私の名前を左揃え（緑色の背景色）にしてから、背景色なし）。サイズを変更して640px以下になると、右揃えのリンクを新しい行に移動し、すべてNavBarのコンテンツを中心にする必要があります。私はリンクを2行目に移動させることはできません。

HTML：

/* menu bar */ 
 
header{ 
 
\t background-color: #ffffff; 
 
\t height: 60px; 
 
\t margin: 0; 
 
\t padding:0; 
 
    } 
 

 
ul{ 
 
\t list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display:block; 
 

 
    } 
 
/* align right */ 
 
li{ 
 
    float:right; 
 
    } 
 
/*link formatting*/ 
 
li a{ 
 
    display:block; 
 
    padding: 8px; 
 
    color:black; 
 
    text-align: center; 
 
    padding:10px 16px; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    } 
 
/* name with background color*/ 
 
li:last-child{ 
 
    font-size: 34px; 
 
    background-color: #4aaaa5; 
 
    position:absolute; 
 
    float:left; 
 
    } 
 

 

 
@media screen and (max-width: 640px) { 
 
    
 
li:last-child{ 
 
    font-size: 34px; 
 
    background-color: #4aaaa5; 
 
    position:absolute; 
 
    width: 100%; 
 
    text-align: center; 
 
    top: 0px; 
 
    } 
 

 
}

<ul> 
 
\t \t \t 
 
\t <li><a id="bottomlinks"href="index.html">About</a></li> 
 

 
\t <li><a id="bottomlinks"href="portfolio.html">Portfolio</a></li> 
 

 
\t <li><a id="bottomlinks"href="contact.html">Contact</a></li> 
 

 
\t <li><a href="#"> Mark Ring</a></li> 
 
</ul> \t

Answer 1

ここではあなたが達成しようとしているように見えるものの基本的なデモです。ご覧のとおり、HTMLとCSSを単純化しました。

希望すると助かります！あなたのコードで

body { 
 
    margin: 0; 
 
} 
 
ul, 
 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
header { 
 
    text-align: center; 
 
    overflow: hidden; /* clearfix */ 
 
} 
 
.brand { 
 
    display: block; 
 
    background-color: #4AAAA5; 
 
    line-height: 60px; 
 
} 
 

 
@media (min-width: 640px) { 
 
    header { 
 
    text-align: left; 
 
    height: 60px; 
 
    } 
 
    .nav { 
 
    float: right; 
 
    } 
 
    .nav li { 
 
    float: left; 
 
    line-height: 60px; 
 
    } 
 
    .brand { 
 
    display: inline-block; 
 
    padding: 0 1rem; 
 
    } 
 
}

<header> 
 
    <a class="brand" href="#">Brand</a> 
 
    <ul class="nav"> 
 
    <li><a href="#about">About</a></li> 
 
    <li><a href="#portfolio">Portfolio</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 
</header>

あなたは（他のリンクの上にブランド要素を絶対位置決めした（それらを見ることができませんでした）とフロートを元に戻すことはできませんでした垂直スタックからそれらを守っています）。