Question

ul.horiz {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul.horiz > li {
  display: inline;
}

<ul class="horiz">
<li>This is the first item text</li>
<li>X</li>
</ul>

我希望有一个水平列表，其中两个项目适合div的100％（因此它会随着浏览器（和div）的变化宽度进行调整。第二个列表项应该有一个固定的宽度，第一个项目应该是填补剩余的空间。

我不确定这是怎么回事。如果可能的话，我不想做百分比。

它不一定是列表（即ul / li），但这是我最初的想法。

第一项是文字内容，第二项是图像。

Answer 1

看看我把这个小提琴放在一起：http://jsfiddle.net/xvo2682e/

它使用以下HTML / CSS：

    .main 
    {
        width: 100%;
        overflow: auto;
    }

    .scaling_left
    {
        margin-right: 100px;
        background-color: #D9F2D0;
    }
    .fixed_right
    {
        float:right;
        width: 100px;
        background-color: #efefef;
    }


   <div class="main">
       <div class="fixed_right">
           Right Column is skinny.
       </div>
       <div class="scaling_left">
           Left column is variably fat.
       </div>
   </div>

基本上，不要浮动要用页面缩放其宽度的div。然后给那个缩放div一个边距等于你浮动它的同一侧的固定宽度div的宽度。

Answer 2

[显示表方法] [1]

如果我理解你的要求是正确的，这可能是[1]之一：http://jsbin.com/tonovupite/1/edit?html,css,output

水平列表，包含第二个固定宽度和第一个填充宽度的2个项目

2 个答案: