Question

菜单有一个简单的问题，它是一个2部分菜单：左边是传统的UL。在右边，包含在div中的链接。右边的div有固定的宽度。左边的div必须占用所有剩余的空间。

我试过溢出：隐藏的技术，无济于事 https://coderwall.com/p/0ph8lg/overflow-hidden-trick-to-fill-remaining-width

.container {
    width:800px;
    height:50px;
}

.left-menu {
    background-color:red;
    width:auto;
    height:50px;
    overflow:hidden;
}
.left-menu ul li {
    display:inline;
}
.right-menu {
    background-color:blue;
    float:right;
    width:100px;
    height:50px;
}

Answer 1

使用calc

.container {
   width:800px;
   height:50px;
}

.left-menu {
    background-color:red;
    width:150px;
    height:50px;
    float:left;
}

.left-menu ul li {
    display:inline;
 }

.right-menu {
     background-color:blue;
     width:calc(100% - 150px);
     height:50px;
 }

更新了您的小提琴：https://jsfiddle.net/3gfqyux4/3/

Answer 2

我认为你的意思是＆＃34;对＆＃34; div有一个固定的宽度（如你的代码所示），左边的div应该占用剩余的宽度。

flexbox可以做到这一点。

＆＃13;

.container {
  width: 80%;
  height: 50px;
  display: flex;
}
.left-menu {
  background-color: red;
  flex: 1 0 auto;
}
.left-menu ul li {
  display: inline;
}
.right-menu {
  background: green;
  flex: 0 1 100px;
}

＆＃13;

<div class="container">
  <div class="left-menu">
    <ul>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
    </ul>
  </div>
  <div class="right-menu">
    <a href="xyz.com">
            xyz.com
        </a>
  </div>
</div>

＆＃13;

JSfiddle Demo

CSS-Tricks: Complete Guide

Answer 3

如果您不改变订单：请记住 display：inline-block ;

.container {
    width:800px;
    height:50px;
}

.left-menu {
    background-color:red;
    width:calc(100% - 100px);
    height:50px;
    /*overflow:hidden;*/
    display:inline-block;

}
.left-menu ul li {
    display:inline;
}
.right-menu {
    background-color:blue;
    float:right;
    width:100px;
    height:50px;
    display:inline-block;
}

Answer 4

更改这两个列表的顺序;）

<div class="container">
<div class="right-menu">
    <a href="xyz.com">
        xyz.com
    </a>
</div>    
<div class="left-menu">
    <ul>
        <li>menu</li>
         <li>menu</li>
         <li>menu</li>
    </ul>
</div>

https://jsfiddle.net/3gfqyux4/2/

溢出：隐藏的全宽div不起作用

4 个答案: