HTML

Question

我需要为这样的导航栏写css（黑色背景是网格，白色和灰色是导航栏本身）：

所以我想不通，如何创建div容器，从中心到左边有550px，从中心到右边有458px，以便在右上角添加橙色按钮。另一件事是右边的橙色按钮应该将所有空间带到屏幕的末尾

Answer 1

根据屏幕比给定的1100px更宽或更窄时会发生什么，这个答案可能需要一些调整。

如果你创建了3个容器，然后给前2个容器flex-basis（宽度）和最后flex-grow（填充剩余空间），你可以完成它。

当空间不足时，此示例会缩小left / right

.wrapper {
  display: flex;
}

.wrapper .left {
  flex-basis: 550px;
}

.wrapper .right {
  flex-basis: 458px;
  
  display: flex;
  justify-content: flex-end;    /*  align right (at end)  */
}

.wrapper .button {
  flex-grow: 1;
}


/* style for this demo */
.wrapper > div {
  padding: 5px;
  box-sizing: border-box;
  border: 1px dashed lightgray;
}

<div class="wrapper">

  <div class="left">
    Links left aligned
  </div>

  <div class="right">
    Links right aligned
  </div>

  <div class="button">
    Button
  </div>

</div>

当空间不足时，此示例将保持left / right宽度，导致出现水平滚动条

.wrapper {
  display: flex;
}

.wrapper .left {
  flex-basis: 550px;
  flex-shrink: 0;             /*  disallow to shrink  */
}

.wrapper .right {
  flex-basis: 458px;
  flex-shrink: 0;             /*  disallow to shrink  */

  display: flex;
  justify-content: flex-end;    /*  align right (at end)  */
}

.wrapper .button {
  flex-grow: 1;
}


/* style for this demo */
.wrapper > div {
  padding: 5px;
  box-sizing: border-box;
  border: 1px dashed lightgray;
}

<div class="wrapper">

  <div class="left">
    Links left aligned
  </div>

  <div class="right">
    Links right aligned
  </div>

  <div class="button">
    Button
  </div>

</div>

此示例会缩小/增长left / right并保持您在父级中心的图像中显示的中心标记。

.wrapper {
  display: flex;
}

.wrapper .left {
  flex: 6 6 0;                  /*  6/12  */
  overflow: hidden;
}

.wrapper .right {
  flex: 5 5 0;                  /*  5/12  */
  overflow: hidden;
  
  display: flex;
  justify-content: flex-end;    /*  align right (at end)  */
}

.wrapper .button {
  flex: 1 1 0;                  /*  1/12  */
  overflow: hidden;
}


/* style for this demo */
.wrapper > div {
  padding: 15px 0;
  box-sizing: border-box;
  border: 1px dashed lightgray;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}

<div class="wrapper">

  <div class="left">
    Links left aligned
  </div>

  <div class="right">
    Links right aligned
  </div>

  <div class="button">
    Button
  </div>

</div>

<div class="mark-center">
  &uarr;    
</div>

Answer 2

尝试使用flexbox，例如，您可以将包装器拆分为div，如下所示：

<div class="wrapper">
    <div class="one">
      <a href="#" class="link">link1</a>
      <a href="#" class="link">link2</a>
      <a href="#" class="link">link3</a>
    </div>
    <div class="two">
      <a href="#" class="link">link4</a>
      <a href="#" class="link">link5</a>
      <a href="#" class="link">link6</a>
    </div>
    <div class="three">
     <!-- button here -->
    </div>
</div>

还有一点风格

.wrapper { 
  display:flex; 
  width: auto;
  height: 50px;
  border: 1px solid;
  .one {
    display:flex;
    border-right: 1px solid;
    width: 550px;
    align-items: flex-end;
    justify-content: flex-start;
    }
    .two {
      display:flex;
      border-right: 1px solid;
      width: 458px;
      align-items: flex-end;
      justify-content: flex-end;
    }
    a {
        padding: 10px;
      }
     .three {
       text-align: center;       
     }
  }

在这里演示：

https://jsfiddle.net/dw60wjq2/希望它会对你有所帮助:)。

Answer 3

/ *请尝试此示例，它将解决桌面版的问题。 * /

HTML

.bg-class {
    background-color: #ccc;
    position: relative;
}
.bg-class:before {
    position: absolute;
    background-color: #000;
    height: 100%;
    width: 50%;
    content: "";
    z-index: 0;
}
.inner-html {
    position: relative;
    z-index: 1;
    color: #fff;
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div class="bg-class">
            <div class="inner-html">Any thing you have just place here</div>
        </div>
    </body>
</html>

CSS

.bg-class {
    background-color: #ccc;
    position: relative;
}
.bg-class:before {
    position: absolute;
    background-color: #000;
    height: 100%;
    width: 50%;
    content: "";
    z-index: 0;
}
.inner-html {
    position: relative;
    z-index: 1;
    color: #fff;
}

如何为非symetric导航栏创建css？

3 个答案:

HTML

CSS