当前位置： 文江博客话题详情

如何显示内联多个
  • 宽度为 100%？

    • 发布于 2024-08-25 02:58:27 字数 589 浏览 8 评论 0原文

    我有以下 html:

    <div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>

    与 css 一起应用，如下所示：

    #container { width:100%; overflow:auto; }
#container ul { width: 100%; }
#container li { width: 100%; }

    所以现在我想要不确定数量的元素 (

  • ) 全部具有 100% 宽度（这样它们就可以相应地调整浏览器的窗口大小），但并排显示容器中的水平滚动条。

    • 我尝试在 ul 的 css 上放置“display:inline”，在 li 的 css 上放置“float:left”，但没有成功。

    有什么建议吗？

    另外，尝试考虑我正在尝试使其尽可能“跨浏览器兼容”。

    提前致谢。

    原文

    I have the following html:

    <div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>

    applied with a css as follows:

    #container { width:100%; overflow:auto; }
#container ul { width: 100%; }
#container li { width: 100%; }

    So now I would like to have an indeterminate number of elements (<li>) all with 100% width (so they can adjust accordingly to the browser's window size) but all side by side, displaying the horizontal scroll bar in the container.

    I have tried putting "display:inline" on ul's css, and "float:left" on li's css, but with no success.

    Any suggestions?

    Also, try to consider I'm trying to make this as "cross-browser compatible" as possible.

    Thanks in advance.

    如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

    扫码二维码加入Web技术交流群

    发布评论

    需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

    评论（7）

    贩梦商人 2024-09-01 02:58:27

    和其他人一样，我正在努力理解您到底在寻找什么，但这是否符合您的要求？

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Horizontal 100% LIs</title>
    <style type="text/css">
#container { width:100%; overflow:auto;}
#container ul { padding:0; margin:0; white-space:nowrap; }
#container li { width: 100%; list-style-type:none; display:inline-block; }
* html #container li { display:inline; }  /* IE6 hack */
* html #container { padding-bottom:17px;}  /* IE6 hack  */
*:first-child+html #container li { display:inline; } /* IE7 hack */
*:first-child+html #container { padding-bottom:17px; overflow-y:hidden; }  /* IE7 hack  */
    </style>
</head>
<body>
    <div id="container">
      <ul>
        <li style="background-color:red">element 1</li><li style="background-color:green">element 2</li><li style="background-color:blue">element 3</li>
      </ul>
    </div>
</body>
</html>

    将 LI 连接到一条线路有两个部分。 ul 上的white-space:nowrap 会停止任何自动换行，LI 上的display:inline-block 允许它们依次运行，但会设置宽度、填充和边距。对于符合标准的浏览器来说这就足够了。

    然而IE6和IE7需要特殊处理。它们不正确支持 display:inline-block ，但幸运的是，设置了 hasLayout 的元素上的 display:inline 提供了非常类似于 display:inline-block 的行为。 width:100% 已经强制在 LI 上设置 hasLayout，因此我们所要做的就是仅将 display:inline 定向到 IE6 和 IE7。有多种方法可以做到这一点（条件注释在 StackOverflow 上很流行），但在这里我选择了 * html 和 *:first-child+html 技巧来完成这项工作。

    另外，IE6和IE7还有另一个bug，滚动条会覆盖内容，因此容器被赋予了一个padding-bottom来为滚动条腾出空间。滚动条是一个平台控件，因此无法准确知道其高度，但 17 像素似乎适用于大多数情况。

    最后，IE7还想放入垂直滚动条，因此针对IE7的overflow-y:hidden阻止了这种情况的发生。

    （padding:0、margin:0、list-style:none 以及各个 LI 上的样式只是为了更清楚地显示正在发生的情况。）

    Like the others I'm struggling to understand what you're looking for exactly but does this do what you want?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Horizontal 100% LIs</title>
    <style type="text/css">
#container { width:100%; overflow:auto;}
#container ul { padding:0; margin:0; white-space:nowrap; }
#container li { width: 100%; list-style-type:none; display:inline-block; }
* html #container li { display:inline; }  /* IE6 hack */
* html #container { padding-bottom:17px;}  /* IE6 hack  */
*:first-child+html #container li { display:inline; } /* IE7 hack */
*:first-child+html #container { padding-bottom:17px; overflow-y:hidden; }  /* IE7 hack  */
    </style>
</head>
<body>
    <div id="container">
      <ul>
        <li style="background-color:red">element 1</li><li style="background-color:green">element 2</li><li style="background-color:blue">element 3</li>
      </ul>
    </div>
</body>
</html>

    Getting the LIs on to one line has two parts. The white-space:nowrap on the ul stops any automatic wrapping and the display:inline-block on the LIs allows them to run one after another, but have widths, paddings and margins set on them. For standards compliant browsers that's sufficient.

    However IE6 and IE7 need special treatment. They don't support the display:inline-block properly, but fortunately display:inline on elements with hasLayout set gives a behaviour very like display:inline-block. The width:100% has already forced hasLayout to be set on the LIs so all we have to do is to direct the display:inline to IE6 and IE7 only. There are a number of ways of doing this (conditional comments are popular on StackOverflow) but here I've chosen the * html and *:first-child+html hacks to do the job.

    Additionally, IE6 and IE7 have another bug where the scroll bar overlays the content, so the container is given a padding-bottom to make space for the scroll bar. The scroll bar is a platform control, so its height cannot be known exactly, but 17 pixels seems to work for most cases.

    Finally, IE7 also wants to put in a vertical scroll bar, so the overflow-y:hidden directed at IE7 stops this from happening.

    (The padding:0, margin:0, list-style:none, and the styles on the individual LIs are just there to show more clearly what's happening.)

    回复 原文
    指尖微凉心微凉 2024-09-01 02:58:27

    你希望它像一个好的老式表格一样：

    <ul class="menu">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>


.menu {
    display: table;
    width: 100%;
}
.menu li {
    display: table-cell;
    padding: 2px;

    background: #900990;
    border: 1px solid yellow;
    color: white;
}

    那么当页面很小时你也可以很好地折叠它：

    /* responsive smaller screen turn into a vertical stacked menu */
@media (max-width: 480px) {

   .menu, .menu li {
       display: normal;
    }

}

    You want it to act like a good old fashioned table:

    <ul class="menu">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>


.menu {
    display: table;
    width: 100%;
}
.menu li {
    display: table-cell;
    padding: 2px;

    background: #900990;
    border: 1px solid yellow;
    color: white;
}

    then you can also collapse it nicely when the page is small:

    /* responsive smaller screen turn into a vertical stacked menu */
@media (max-width: 480px) {

   .menu, .menu li {
       display: normal;
    }

}
    回复 原文
    因为看清所以看轻 2024-09-01 02:58:27

    您尝试执行的操作与表格单元格执行的操作类似，并且如果不使用 JavaScript，则不可能执行此操作（但是，我不建议为此使用表格或 JavaScript）。最好的办法是在

  • 标签上设置一定量的水平填充并浮动它们，以便它们根据内容的宽度而不是窗口的宽度自动调整宽度：
    • <div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>

<style type="text/css">
#container, #container ul {
    width: 100%;
    float: left;
}

#container ul li {
    margin: 0 10px 0 0;
    padding: 5px 10px;
    float: left;
}
</style>

    另一种方法是使用 display: inline-block; 来实现你想要的，但它是一种 hack（不跨浏览器兼容）。

    What you're trying to do resembles what table cells do and is impossible otherwise, without using JavaScript (I don't suggest using tables or JavaScript for this, however). Your best bet is to set a certain amount of horizontal padding on the <li> tags and float them so that they are auto-width based on their content's width instead of the window's width:

    <div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>

<style type="text/css">
#container, #container ul {
    width: 100%;
    float: left;
}

#container ul li {
    margin: 0 10px 0 0;
    padding: 5px 10px;
    float: left;
}
</style>

    The other method is to use display: inline-block; to achieve what you want, but it's kind of a hack (not cross-browser compatible).

    回复 原文
    踏雪无痕 2024-09-01 02:58:27

    使用 jquery 在页面后留出 li 的间距

      var ul = $('#yourListId');
  var numChildren = ul.children().length;
  if(numChildren <= 0){
    return;
  }
  ul.css({'list-style':'none','margin':0,'padding':0});
  var parentWidth = ul.width();
  var childWidth = parentWidth/numChildren;
  ul.children().each(function(index, value){
    $(this).css({'width':childWidth,'margin':0,'float':'left','display':'inline-block'});
  });
  ul.after('<div style="clear:both">');

    除了“childWidth”css 之外...当然，您可以用样式表中的内容替换其他 css。

    using jquery to space your li's after your page has

      var ul = $('#yourListId');
  var numChildren = ul.children().length;
  if(numChildren <= 0){
    return;
  }
  ul.css({'list-style':'none','margin':0,'padding':0});
  var parentWidth = ul.width();
  var childWidth = parentWidth/numChildren;
  ul.children().each(function(index, value){
    $(this).css({'width':childWidth,'margin':0,'float':'left','display':'inline-block'});
  });
  ul.after('<div style="clear:both">');

    With the exception of the "childWidth" css... you can, of course, replace the other css with something from a style sheet.

    回复 原文
    错爱 2024-09-01 02:58:27

    一般来说，要水平显示 li，您会将它们全部向左浮动。让我困惑的部分是 100% 宽度。当每个 li 只能与容器一样宽时，它们如何具有 100% 的宽度？看来 li 需要固定宽度或自动调整大小，根本没有宽度。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
        #container { width:100%; overflow:auto; }
        #container ul { width: 100%; }
        #container li { float:left; }
    </style>
</head>
<body>
    <div id="container">
      <ul>
        <li>element 1</li>
        <li>element 2</li>
      </ul>
    </div>
</body>
</html>

    Generally to show li's horizontally you would float them all left. The part that confuses me is the 100% width. How can each li have 100% width when they can only be as wide as their container? It seems like the li's need to be fixed width or autosized with no width at all.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
        #container { width:100%; overflow:auto; }
        #container ul { width: 100%; }
        #container li { float:left; }
    </style>
</head>
<body>
    <div id="container">
      <ul>
        <li>element 1</li>
        <li>element 2</li>
      </ul>
    </div>
</body>
</html>
    回复 原文
    妳是的陽光 2024-09-01 02:58:27

    我认为你想要做的事情在跨浏览器css和html中是不可能的；如果将 li 的宽度设置为 100%，则将其设置为其父元素的宽度，而您真正需要的是父元素（ul）得到所有 li 组合的宽度。并且您不能仅使用 css 将宽度设置为屏幕宽度的 x 倍。

    即使可以，它也会增加 li，因为 li 被告知是其父元素的 100%。对于浏览器来说有点像先有鸡还是先有蛋的问题。

    在 javascript 中很简单，只需计算 li 的数量，将它们的宽度设置为屏幕宽度，并将 ul 宽度设置为（li 的数量）x（屏幕宽度）。

    I think that what you want to do is not possible in cross-browser css and html; if you set the width of the li to 100%, you set it to the width of its parent element and what you really need is for the parent element (the ul) to have the width of all li's combined. And you cannot set the width to x-times the screen width using just css.

    And even if you could, it would also grow the li's as the are told to be 100% of its parent element. Sort of a chicken and egg problem for the browser.

    In javascript is's easy though, just calculate the number of li's, set their width to the screen width and set the ul width to (the number of li's) x (screen width).

    回复 原文
    春花秋月 2024-09-01 02:58:27

    试试这个

    <div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>


   #container { width:100%;  }
   #container ul { text-align:center; }
   #container li { display:inline; text-align:center;padding-left:20px; padding-right:20px; }

    Try this

    <div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>


   #container { width:100%;  }
   #container ul { text-align:center; }
   #container li { display:inline; text-align:center;padding-left:20px; padding-right:20px; }
    回复 原文
    ~没有更多了~

    关于作者

    差↓一点笑了

    暂无简介

    0 文章
    0 评论
    24 人气
    发私信

    相关话题

    更多

    热门标签

    操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
    更多

    推荐作者

    avyhlj

    文章 0 评论 0

    廾匸

    文章 0 评论 0

    自演自醉

    文章 0 评论 0

    臧立杰

    文章 0 评论 0

    mb_XvqQsWhl

    文章 0 评论 0

    鲜血染红嫁衣

    文章 0 评论 0

    更多

    友情链接

    文江博客
      我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
      原文