スタイリング時に参照を整列する方法html css nav？

私は自分のナビをスタイリングしています。私はAboutとActionsを左に配置する必要があります。しかし、電話、ユーザー名、現金は右に揃っていた。どうすればこれを達成できますか？スタイリング時に参照を整列する方法html css nav？

.header { 
 
\t margin: 0; 
 
\t text-align: left; 
 
\t color: white; 
 
} 
 
.my-header{ 
 
\t background-color: #003399; 
 
} 
 
.header li, form { display: inline; } 
 

 
.header-normal li a{ 
 
\t text-decoration: none; 
 
\t padding-right: 10px; 
 
\t padding-left: 5px; 
 
\t color: white; 
 
\t font-size: 14pt; 
 
\t font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 
 
} 
 
.normal li a:hover{ 
 
\t color: #ff6699; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <link rel="stylesheet" type="text/css" href="menu_laba3.css"> 
 
</head> 
 
<body> 
 
\t <div class="my-header"> 
 
\t \t <ul class="header-normal header"> 
 
\t \t \t <li><a href="#">About</a></li> 
 
\t \t \t <li><a href="#">Actions</a></li> 
 
\t \t \t <li> Telephone: +375293326369 </li> 
 
\t \t \t \t <li><a href="#"> username </a> </li> 
 
\t \t \t \t <li> 500$ </li> 
 
\t \t \t 
 
\t \t </ul> 
 
\t </div> 
 
</body> 
 
</html>

出典

2016-06-18 Alexander Tolkachev

'float'プロパティを追加してみてください – Advaith

（少し編集した）

あなたのCSSにこれを追加します。

.header-normal { 
    display: flex; 
    align-items: baseline; 
    } 
ul.header-normal li:nth-child(3) { 
    margin-left: auto; 
    }

それはに対して垂直方向のアイテムを揃える、フレックスコンテナとしてメニューulを扱いますベースライン。 3番目のリスト項目のmargin-left: autoは、そこからすべてが右に揃うようにします。

.header { 
 
\t margin: 0; 
 
\t text-align: left; 
 
\t color: white; 
 
} 
 
.header-normal { 
 
    display: flex; 
 
    align-items: baseline; 
 
    } 
 
ul.header-normal li:nth-child(3) { 
 
    margin-left: auto; 
 
    } 
 
    
 
.my-header{ 
 
\t background-color: #003399; 
 
} 
 
.header li, form { display: inline; } 
 

 
.header-normal li a{ 
 
\t text-decoration: none; 
 
\t padding-right: 10px; 
 
\t padding-left: 5px; 
 
\t color: white; 
 
\t font-size: 14pt; 
 
\t font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 
 
} 
 
.normal li a:hover{ 
 
\t color: #ff6699; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <link rel="stylesheet" type="text/css" href="menu_laba3.css"> 
 
</head> 
 
<body> 
 
\t <div class="my-header"> 
 
\t \t <ul class="header-normal header"> 
 
\t \t \t <li><a href="#">About</a></li> 
 
\t \t \t <li><a href="#">Actions</a></li> 
 
\t \t \t <li> Telephone: +375293326369 </li> 
 
\t \t \t <li><a href="#"> username </a> </li> 
 
\t \t \t <li> 500$ </li> 
 
\t \t \t 
 
\t \t </ul> 
 
\t </div> 
 
</body> 
 
</html>

出典

2016-06-18 15:09:45 Johannes

残りの2つの異なるクラスについて用とアクションを作ってみましょうし、別の。また、CSSのいくつかを調整して、ナビゲーション要素が垂直方向にもセンタリングされるようにしました（行の高さとナビゲーションの高さ）。

.header { 
 
    margin: 0; 
 
    padding: 0px; 
 
    color: white; 
 
} 
 
.my-header{ 
 
    background-color: #003399; 
 
    height: 25px; 
 
} 
 
.header li, form { display: inline; } 
 

 
.header li { 
 
    line-height: 25px; 
 
} 
 

 
.header-normal li a{ 
 
    text-decoration: none; 
 
    color: white; 
 
    line-height: 25px; 
 
    padding-right: 10px; 
 
    vertical-align: middle; 
 
    padding-left: 5px; 
 
    font-size: 14pt; 
 
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 
 
} 
 

 
.normal li a:hover{ 
 
    color: #ff6699; 
 
} 
 

 
    .AlignLeft { 
 
     text-align: left; 
 
     float: left; 
 
    } 
 

 
    .AlignRight { 
 
     text-align: right; 
 
     float:right; 
 
    }

<html> 
 
    <head> 
 
     <link href="index.css" rel="stylesheet" type="text/css"> 
 
    </head> 
 
    <body> 
 
    <div class="my-header"> 
 
     <ul class="header-normal header"> 
 
     <li><a href="#" class="AlignLeft">About</a></li> 
 
     <li><a href="#" class="AlignLeft">Actions</a></li> 
 
     <li class="AlignRight"> Telephone: +375293326369 </li> 
 
     <li><a href="#" class="AlignRight"> username </a> </li> 
 
     <li class="AlignRight"> 500$ </li> 
 
     </ul> 
 
    </div> 
 
    </body> 
 
    <html>

出典

2016-06-18 14:34:51 Ike10

スタイリング時に参照を整列する方法html css nav？

答えて

関連する問題