一边是CSS自动保证金

Question

我在页面设计上遇到了一个小难题。最好以图像形式描述。

顶部图片代表现在的页面 - 蓝色是我的导航容器，黄色是页面内容。

目前，导航是一个全宽（左右分割），内容限制为1024px宽，只需使用自动边距居中。

然而，在宽页面上，这看起来很奇怪。所以，我想做的是将菜单项与内容的右侧对齐（如下图所示）。问题是我不知道左/右边距的宽度。

我毫不怀疑这可以通过javascript实现，但鉴于它是页面设计的基础，我宁愿尝试用CSS实现一些东西。

目前，我甚至不确定这是否可以单独使用CSS - 任何人之前都做过这样的事情？

header {
  background: blue;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  height:64px;
  width: 100%;
}

.title {
    flex: initial;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  
}
nav {
  flex: 0 0 auth;
  margin-left:40px;
}
ul {
  display:flex;
  list-style: none;
}
ul > li > a {
  color:Black;
  padding:0 16px;
  white-space:nowrap;
}
main {
  background-color:yellow;
  max-width:1024px;
  margin:0 auto;
}

<header>
  <div class="title">This is a really long title that replaces the logo.</div>
  <nav>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    <ul>
  </nav>
</header>
<main>
  <p>
   This is some content.
  </p>
</main>

Answer 1

这样的东西？

<header>
  <div class="title">Mysite.co.uk</div>
  <nav id="main-nav">
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    <ul>
  </nav>
</header>

header {
  width: 100%;
  background: blue;
  position: relative;
}

header nav {
  width: 100%;
  max-width: 1024px;
  margin 0 auto;
}

header .title {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}

FIDDLE

Answer 2

你可以这样做：

＆＃13;

＆＃13;

header {
  height: 40px;
  display: block;
  background: blue;
  color: white;
}

nav {
 position: absolute;
 right: 0;
 left: 0;
 top: 0;
}

ul {
  width: 400px;
  margin: auto;
  display: flex;
  justify-content: flex-end;
  padding: 0;  
}

section {
  background: yellow;
  width: 400px;
  margin: auto;
}

＆＃13;

<header>
  Logo
  <ul>
    <li>item1</li>
    <li>item1</li>
  </ul>
</header>
<main>
  <section>content</section>
</main>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用calc()进行一些计算。 header的宽度为100％，内容为1024px，因此在header内需要添加一个等于一个边距的填充：(100% - 1024px)/2

body {
 margin:0;
}
header {
  background: blue;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 24px;
  padding-right: calc((100% - 1024px) / 2);
  height: 64px;
}

.title {
  flex: initial;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

nav {
  flex: 0 0 auth;
  margin-left: 40px;
}

ul {
  display: flex;
  list-style: none;
}

ul>li>a {
  color: Black;
  padding: 0 16px;
  white-space: nowrap;
}

main {
  max-width: 1024px;
  margin: 0 auto;
  background: yellow;
}

<header>
  <div class="title">This is a really long title that replaces the logo.</div>
  <nav>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>ul>
  </nav>
</header>
<main>
  <p>
    This is some content.
  </p>
</main>