具有第二固定宽度和第一填充宽度的2个项目的水平列表 [英] Horizontal List of 2 items with second fixed width and first fill-width

问题描述

  ul.horiz {margin：0;填充：0; list-style-type：none;} ul.horiz> li  

< ul class = horiz>< li>这是第一项文字< / li>< li> X< / li>< / ul>

我想要有一个水平列表中的两个项目适合div的100％div（所以它调整为浏览器（和div）改变宽度第二个列表项应该有一个固定的宽度，第一个项目应该填充剩余的空间。

我不知道这是怎么可能的，如果可能的话，我想要做百分比。

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

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

解决方案

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



它使用th在HTML / CSS之后：



  .main 
 {
 width：100％; 
溢出：auto; 
} 
 
 .scaling_left 
 {
 margin-right：100px; 
背景颜色：＃D9F2D0; 
} 
 .fixed_right 
 {
 float：right; 
 width：100px; 
 background-color：#efefef; 
} 
 
 
< div class =main> 
< div class =fixed_right> 
右栏是很瘦的。 
< / div> 
< div class =scaling_left> 
左栏变化很大。 
< / div> 
< / div> 
  

基本上，不要浮动要用页面缩放宽度的div。然后给这个缩放div一个等于固定宽度div的宽度的浮动边缘的宽度。

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>

I want to have a horizontal list of two items fit in a div 100% of the div (so it adjusts as the browser (and div) changes width. The second list item should have a fixed width and the first item should fill the remaining space.

I'm not sure how this is possible. I don't want to do percentages, if possible.

It doesn't necessarily have to be a list (i.e. ul/li), but that was my initial thought.

The first item would be text content and the second item would be an image.

解决方案

Check out this fiddle I've put together: http://jsfiddle.net/xvo2682e/

It uses the following 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>

Basically, don't float the div whose width you want to scale with the page. Then give that scaling div a margin equal to the width of the fixed-width div on the same side that you float it to.

这篇关于具有第二固定宽度和第一填充宽度的2个项目的水平列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！