Question

目前通过查看其他先前提出的问题得到以下设置，尽管现在我被卡住了，因为它不会超出

Answer 1

100％宽度的跨度

<style type="text/css">
.banner span{
  width: 100% !important;
}
</style>

Answer 2

你的意思是你希望它扩展到全屏宽度？如果是这样，你需要使其父元素宽度为100%，例如

body {
       width: 100%;
}

它可能是另一个父母，如div.container或其他..

Answer 3

你可以在里面添加img。

<div ng-controller="MainCtrl">
  <header class="banner">
    <div class="banner-wrapper">
      <div class="banner-title">
          <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/81/Williams_Companies_logo.svg/1280px-Williams_Companies_logo.svg.png" height="100px" width="100%">
      </div>
      <nav class="banner-nav">
            {{ portal | welcome_navigation }}
      </nav>
    </div>
      <nav class="nav-menu" id="header-tabs">
      <ul>
            <li class="nav-menu-title"><a href="https://www.TEST.co.uk" class="nav-links">Back to Main Site</a></li>
        <li class="nav-contact">| Questions? Get in touch: <li class="nav-number">12345568693</li>
      </ul>
      </nav>
  </header>
</div>

Answer 4

这实际上与宽度无关，因为标题元素已经应该跨越整个宽度。你的html主体必须有一些默认的边距或填充。您需要做的就是将body标签上的默认边距和填充设置为0。（我通常遵循将身体上的边距/填充设置为0作为一般做法）

您可以删除现有的css代码并将其替换为此（我已检查，它正在运行）：

body {
  padding: 0;
  margin: 0;
}

<header class="banner">
  <div class="banner-wrapper">
    <div class="banner-title">
      {{ portal | logo }}
    </div>
    <nav class="banner-nav">
      {{ portal | welcome_navigation }}
    </nav>
  </div>
  <nav class="nav-menu" id="header-tabs">
    <ul>
      <li class="nav-menu-title"><a href="https://www.TEST.co.uk" class="nav-links">Back to Main Site</a></li>
      <li class="nav-contact">| Questions? Get in touch:
        <li class="nav-number">12345568693</li>
    </ul>
  </nav>
</header>

如何让我的横幅跨越整个网站的宽度

4 个答案: