Question

屏幕显示我想要实现的目标：（我介绍了徽标和链接）

我的标题包含两个元素：徽标部分和导航栏。

现在我正在尝试为nav元素创建一个border-top，即任何给定大小的屏幕宽度的100％。

我不能使用padding-left-right，我想避免使用额外的标记。

这可以实现吗？可能使用a：之前？

<header>
    <div class="site-header">
        some stuff + a full width border in the middle!
    </div>
    <nav>
        <ul>
            <li>linka</li>
            <li>link b</li>
        </ul>
    </nav>
</header>


.site-header, nav {
    max-width: 500px;
    margin: 0 auto;
}

nav {
    border-top: 1px solid red; 
}

小提琴： https://jsfiddle.net/oodrabm2/1/

Answer 1

你的导航应该在标题之外，或者你只需要在网站标题上设置宽度，而不是像以下那样导航：

＆＃13;

.site-header, nav ul {
    max-width: 500px;
    margin: 0 auto;
}

nav {
    border-top: 1px solid red; 
}

＆＃13;

<header>
    <div class="site-header">
        some stuff + a full width border in the middle!
    </div>
    <nav>
        <ul>
            <li>linka</li>
            <li>link b</li>
        </ul>
    </nav>
</header>

＆＃13;

Answer 2

使用:before应该可以实现：

header {overflow: hidden;}
nav {position: relative;}
nav:before {
    content: ''; 
    height: 1px; 
    background: red;
    width: 500%;
    position: absolute; 
    top: -10px;
    left: -50%;
}

https://jsfiddle.net/oodrabm2/4/

我们的想法是让:before元素比整个页面更宽（或者在这种情况下为header）并将其与overflow: hidden结合使用以避免滚动条。

Answer 3

是的，伪元素是合适的，你可以使用position:absolute。

.site-header,
nav {
  max-width: 500px;
  margin: 0 auto;
}
nav {
  position: relative;
  background: lightblue;
}
nav::before {
  content: '';
  position: absolute;
  top: 0;
  border: 1px solid red;
  width: 100vw;
  height: 0px;
  left: 50%;
  transform: translateX(-50%);
}

<header>
  <div class="site-header">some stuff + a full width border in the middle!</div>
  <nav>
    <ul>
      <li>linka</li>
      <li>link b</li>
    </ul>
  </nav>
</header>

使边框宽度比元素宽（不使用填充）

3 个答案: