Question

我有以下要素。图像固定为325X70像素，位于左上角。我希望列表项均匀分布，以填充宽度的其余部分，并响应浏览器调整大小。我确信这很容易，但我似乎无法让它发挥作用。

<div class="wrapper">
    <div class="left">
        <div class="image">Image Here</div>
    </div>
    <div class="menu">
        <ul>
            <li>X</li>
            <li>Y</li>
            <li>Z</li>
            <li>A</li>
        </ul>
    </div>
</div>`

CSS

* {
    padding: 0px;
    margin: 0px;
}
.wrapper {
    position: relative;
        
}
.left {
    float: left;
   
  
}
.image {
    min-width: 325px;
    max-width: 325px;
    height: 70px;
    background-color: red;

}
.menu {
    width: 100%;
    height: 70px;
    background-color: black;
   
    
}
.menu ul {
    position: absolute;
    width: 100%;
    height: 70px;
    display: table;
  
    
}
.menu li {
    color: #FFF;
    width: 25%;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    list-style-type: none;
  
}

Answer 1

您可能不需要.left课程，您可能只能对图片本身进行样式设置，但无论如何，这里需要做的是.left和.menu需要并肩。要做到这一点......

.left,
.menu {
    display: inline-block;
    vertical-align: middle;}

我们知道图像总是宽325px，所以让我们设置父容器以匹配...

.left {
    width:325px;}

然后我们希望.menu成为屏幕的整个宽度，减去图像/容器，所以我们可以这样做......

.menu {
    width: calc(100% - 325px);}

您仍需要将li横向调整...

li {
    display: inline-block;
    vertical-align:middle;}

均匀间隔<li>内嵌固定图像

1 个答案: