如何让UL中的LI项目直线排成一行？ [英] How to make the LI items in UL go straight in one line?

问题描述

我正在尝试使用UL / LI（Heirarchial）创建CSS菜单项。我可以创建如下结构：

 UL 
 LI 
 LI 
 UL 
 LI 
 LI 
 LI 

现在输出将是



<前lang =HTML> M1 M2 M3 M4
M2.1 M4.1
M4.2

现在发生的事情是在M12之后，因为屏幕空间有限，所以它呈现为

 M1 M2 M3 M4 M5 M6 M7 M8 M9 M10 M11 M12 
 
 M13 M14 M15 M16 

我是希望单行中的每个菜单项如下（即使它在浏览器中创建一个水平滚动条）：

 M1 M2 M3 M4 M5 M6 M7 M8 M9 M10 M11 M12 M13 M14 M15 M16 

我试图将最顶级的UL包装在DIV中

  overflow：auto  

并尝试

  whitespace：nowrap  

。但无济于事。我们如何实现这一目标？

解决方案

我之前提供的解决方案确保所有项目都在一行上，并在需要时生成滚动条。如果你说你宁愿让整个页面变宽，在页面级别使用滚动条，那么使用

 overflow：visible; 

而不是

溢出：自动; 

你在右边跟踪UL级别，

 white-space：nowrap; 
溢出：自动; 

但是你还需要LI元素的这种风格：

显示：内联; 

如果您已经尝试过但它仍然无法正常工作，那么它'是因为你拼错了白色空间（你忽略了破折号）。

I am trying to create a CSS Menu Item using UL/LI (Heirarchial). I am able to create a structure like below:

UL
  LI
  LI
    UL 
      LI 
        LI 
  LI

Now the output would be

M1 M2      M3    M4
    M2.1           M4.1
                     M4.2

Now what is happening is after M12, because screen space is restricted it renders as

M1 M2 M3 M4 M5 M6 M7 M8 M9 M10 M11 M12

M13 M14 M15 M16 

I am looking to have every menu item in the single line like below (even if it creates an horizontal scrollbar in the browser):

M1 M2 M3 M4 M5 M6 M7 M8 M9 M10 M11 M12 M13 M14 M15 M16 

I tried to wrap the topmost UL within a DIV with style

overflow:auto

and tried

whitespace:nowrap

on ULs. But no avail. How do we achieve this?

解决方案

The solution I gave earlier ensures that all items are on a single line and generates a scrollbar when needed. If you are saying that you would rather have the entire page widen, with a scrollbar at the page level, then use

overflow:visible;

instead of

overflow:auto;

You were on the right track on the UL level, with

white-space:nowrap;
overflow:auto;

But you also need this style on the LI elements:

display:inline;

If you already tried that and it still didn''t work, then it''s because you misspelled "white-space" (you left out the dash).

这篇关于如何让UL中的LI项目直线排成一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！