位元件的左側和右側

一個客戶想要一個導航佈局，如下圖所示：位元件的左側和右側

How the menu works

正如你所看到的，它是由「主要環節」和「亞通」。每個可以有任意數量，並且文本內容可能會改變。菜單容器的寬度將根據頁面大小而改變。

上帝保佑設計師，他們決定對齊這些鏈接的左右邊緣，並保持每個鏈接之間的一致空間。客戶端是adamant這就是導航的製作方式。

所以，問題是：如何做到這一點？我已經用表格（CSS和HTML）嘗試過了，但是當它們在總長度上對齊時，單元格中的文本不會在右側對齊。

目前的解決方案是在元素上放置一個自定義數量的填充直到它們排列，但顯然這是一個垃圾解決方案。我不想最終不得不用JavaScript來衡量事情，所以如果有人知道一個聰明的方法來完成這件事，我一定會很感激。

來源

2014-07-14 Grim...

當然，你只需要擔心最後一個鏈接......並且'text-align：right'會解決這個問題嗎？ –

我覺得他很困惑。我認爲他希望菜單居中並均勻地填充屏幕的整個頂部。 –

@Paulie_D雖然這不符合「每個[鏈接]」部分之間的一致空間量。 –

這聽起來像是一個問題，它涉及到正確數量的div來對齊中心的文本。我做了在撥弄一個解決方案，你可以在這裏看到：http://jsfiddle.net/denWG/32/

HTML：

<body> 
    <div class="container"> 
    <div class="in_container"> 
     <a href="" class="name">Example Exampleson</a> 
    </div> 
    <div class="in_container"> 
     <a href="" class="title">Producer</a> 
    </div> 
    </div> 
</body>

CSS：

.container{ 
    width: 200px; 
    height: 200px; 
} 

.in_container{ 
    text-align: center; 
} 

} 
.name { 
    font-weight: bold; 
    margin: 0 auto; 
} 

.title { 
    margin: 0 auto; 
    font-size: 11px; 
    line-height: normal; 
}

來源

2014-07-14 14:04:04 Anonymous

雖然沒有對齊左右邊緣？ –

我認爲CSS表格會得到你最方式。

你只需要對準每個

JSfiddle Demo

CSS

* { 
    margin: 0; 
    padding: 0; 
} 

.menu ul { 
    padding: 0 3px; 
    display: table; 
    width:100%; 
} 
.menu-list li { 
    height: 45px; 
    list-style: none; 
    background-color: #f69b58; 
    display:table-cell; 
    /* add this */ 
    text-align: center; 
    font-family: arial; 
    font-size: 14px; 
    margin-right: 2px; 
} 

.menu-list li:first-child { 
    text-align:left; 
} 

.menu-list li:last-child { 
    text-align:right; 
} 

.menu-list li a { 
    display: block; 
    padding: 13px; 
    color: #ffffff; 
    text-decoration: none; 
} 

.menu-list li:active { 
    color:black; 
    background-color: #3EAEE9; 
} 
.menu-list li:hover { 
    background:#3eaee9; 
} 
.menu-list li.current { 
    background-image: -webkit-linear-gradient(top, rgb(7, 80, 158), rgb(6, 101, 243)); 
    background-color: #3EAEE9; 
}

注意的第一個和最後一個元素的文本：這不會使各個環節之間的距離同樣的，因爲你會（幾乎肯定）需要JS。

來源

2014-07-14 14:14:51

Re：注意 - 這就是我所害怕的，我使用'text-align：justify'來提供一些東西，並且不會破壞空間。 –

位元件的左側和右側

回答

相關問題