保持列出了在任何時候都

Question

我有一些麻煩，試圖保持清單水平水平，我一直沒能在任何地方和空白找到它：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修復！

謝謝！

Answer 1

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; 
}