保持列出了在任何時候都

-1

我有一些麻煩，試圖保持清單水平水平，我一直沒能在任何地方和空白找到它：NOWRAP不起作用。我不介意在屏幕大小後出現在文本下面的4個項目，但它仍然是水平的，在這種情況下，它是垂直的，我不知道爲什麼，我的小提琴嘗試通過重新調整大小和你會我的意思！保持列出了在任何時候都

<div class="menu"> 
    <h2> 
     This is a text 
    </h2> 
    <ul> 
     <li><a>Test1</a></li> 
     <li><a>Test2</a></li> 
     <li><a>Test3</a></li> 
     <li><a>Test4</a></li> 
    </ul> 
</div>

JS Fiddle

請只CSS或HTML修復！

謝謝！

來源

2016-02-03 Gui

你需要拿起一些技術條款。 *「保持列表水平」*可能意味着網頁設計中的一件事。這可能意味着您想要在一行中列出所有項目，或者這可能意味着您不希望列表項目包裝其內容。好？ –

h2 { 
 
    display: inline; 
 
} 
 

 
ul { 
 
    text-align: right; 
 
    margin-right: 100px; 
 
    white-space: nowrap; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
} 
 

 
a { 
 
    padding: 14px 16px; 
 
}

<div class="menu"> 
 
    <h2> 
 
    This is a text 
 
    </h2> 
 
    <ul> 
 
     <li><a>Test1</a></li> 
 
     <li><a>Test2</a></li> 
 
     <li><a>Test3</a></li> 
 
     <li><a>Test4</a></li> 
 
    </ul> 
 
</div>

浮動是不是你的朋友

只要改變你的UL和李樣式如下所示：

ul { 
    margin-right: 100px; 
    white-space: nowrap; 
    text-align: right; 
} 

li { 
    display: inline-block; 
}

來源

2016-02-03 03:13:51 Aguardientico

您提出的解決方案如何將所有「li」都保存在同一行上？ –

運行它，看起來像它的工作;） – Aguardientico

它的工作！感謝你發佈，我不知道爲什麼安德烈投它-1。我的問題是浮動，不知道這是一個問題。 – Gui

保持列出了在任何時候都

回答

相關問題