將菜單項展開爲最大寬度引導程序

-2

我有一個頂部導航欄和html文件中的一些內容。問題是菜單項在屏幕中間，就像在這個簡單的表示中一樣：將菜單項展開爲最大寬度引導程序

%%%% item 1 %% item 2 %% item 3 %% item 4 %% item 5 %% %%

其中％表示空間。當我把內容放在html中時，它不會在左側或右側與導航欄對齊。例如，文本在兩邊都會出現邊界，但只是在視覺上。問題是菜單項是一些單元格，裏面的文本是居中的，所以它在左側和右側都有一些空間，這就是爲什麼當我使用容器時，html中的文本看起來不對齊。有沒有辦法擴展項目文本以填充單元格的最大長度，或者使單元格與文本的大小完全吻合，以解決問題？

請參閱圖片以更好地理解問題。

來源

2017-09-23 AMayer

請包括[最小，完整的，並且可驗證示例]（https://stackoverflow.com/help/mcve）。我們不介意讀者，如果您不顯示給我們，我們無法幫助您修復您的代碼！ – FluffyKitten

那麼，我正在使用這個框架和CSS有20.000行代碼。我不知道如何隔離隻影響導航欄的部分，所以我可以發佈它。 – AMayer

或者，您可以使用https://jsfiddle.net/來製作代碼示例並在您的問題中嵌入鏈接。 –

我假設你使用的自舉（但我不會讀心術）。我希望能夠正確理解你的問題。

如果您使用的自舉提出了一個預定義模板，你可能有這樣的事情來表示你的導航欄：

<ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">Page 1</a></li> 
    <li><a href="#">Page 2</a></li> 
    <li><a href="#">Page 3</a></li> 
</ul>

錨標記上有設置默認參數，你需要的，如果要覆蓋這些參數你自己的參數。在你的情況下，你需要通過將其設置爲0px來刪除左側和右側填充。

<ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a style="padding-left: 0px; padding-right: 0px" href="#">Page 1</a></li> 
    <li><a style="padding-left: 0px; padding-right: 0px" href="#">Page 2</a></li> 
    <li><a style="padding-left: 0px; padding-right: 0px" href="#">Page 3</a></li> 
</ul>

您可以創建一個css類來擁有更清晰的代碼。

其結果將是類似this

來源

2017-09-23 13:46:56

謝謝！有用。 – AMayer

將菜單項展開爲最大寬度引導程序

回答

相關問題