導航欄對齊部分右側部分左側錯誤

我正在嘗試創建左側的一些項目和右側的一些項目（左側項目1，右側項目2和3）的導航欄。我的JSFiddle有我目前的代碼。導航欄對齊部分右側部分左側錯誤

我試圖解決這個問題：

float: right
text-align:right

他們都不似乎工作。我確信有一個超級簡單的解決方案，但我想不起來。

HTML：

<div class="navbar"> 
     <!--Create the button home --> 
     <p class="innav">Num1</p> 
     <p class="HL">|</p> 
     <p class="rightIn">Num2</p> 
     <p class="HL">|</p> 
     <p class="rightIn">NUM 3</p> 
     <p class="HL">|</p> 

</div>

CSS：

div.navbar{ 
width:100%; 
height: 30px; 
background-color: #03572c; 
} 

p{ 
    display: inline; 
} 

p.innav{ 
color:white; 
font-size: 24px; 
width: 30px; 
height: 30px; 
margin-left: 10px; 
margin-top: 10px; 
} 
p.rightIn{ 
color:white; 
font-size: 24px; 
width: 30px; 
height: 30px; 
margin-left: 10px; 
margin-top: 10px; 

} 
.HL{ 
margin-left: 10px; 
color:white; 
font-size:24px; 

}

JSfiddle

任何幫助將不勝感激！ :)

來源

2015-10-31 intboolstring

將這些樣式添加到您的CSS。

p.rightIn, 
p:nth-child(4), 
p:nth-child(6) 
{ 
    float: right; 
    margin: 0px 5px; 
    width: auto; 
}

Jsfiddle

來源

2015-10-31 03:28:11 Alex

好極了！當添加更多的孩子時，是否只添加'p：nth-child（x）'，其中x是孩子號碼？ – intboolstring

'p：nth-child（x）'用於將'.HL'元素浮動到右側（最後兩個'.HL'）。你可以給他們定製類（'.HL-fl-r'）。並替換爲'p：nth-child（x）' – Alex

@alirezasafian我對它有一些疑問，如果我們將使用float鏈接，那麼link2將是最後一個鏈接，link3將是第二個最後一個鏈接我們如何解決這個問題，我也有同樣的想法需要做。我想輸出像左側的鏈接1和鏈接2將在右側的第一個鏈接，然後鏈接3將是右側的最後一個鏈接 – Shailesh

我會建議你使用一個CSS網格系統對於這一點，因爲你很可能會在你的網站在一個需要這個功能。

這裏是我在過去使用的一些網格系統：

純CSS
http://purecss.io/grids/

基金會
http://foundation.zurb.com/docs/components/grid.html

引導
http://getbootstrap.com/css/#grid

語義UI
http://semantic-ui.com/collections/grid.html

或者，如果你覺得創建自己的網格系統，這裏是一個關於它的好文章：
http://www.sitepoint.com/understanding-css-grid-systems/

來源

2015-10-31 03:29:10

我認爲這是一個評論，而不是一個答案。請，在評論部分插入這種答案。 – Alex

nav { 
 
    background: #000000; 
 
    width: 100%; 
 
    display: block; 
 
    padding: 8px 0; 
 
    font-family: arial; 
 
    font-size: 13px; 
 
} 
 
nav span { 
 
    display:block; 
 
    width:100%; 
 
    line-height: normal; 
 
    text-align:right; 
 
} 
 
nav a { 
 
    color: #ffffff; 
 
    padding: 0 10px; 
 
    text-decoration: none; 
 
    display:inline-block; 
 
    border-right:1px solid #ffffff; 
 
} 
 
nav a:first-child{ 
 
    float:left; 
 
} 
 
nav a:last-child{ 
 
    border:none; 
 
}

<nav> 
 
    <span> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </span> 
 
</nav>

Demo

來源

2015-10-31 04:18:21 Shailesh

導航欄對齊部分右側部分左側錯誤

回答

相關問題