Question

我正在重新创建我在The Economist找到的文章，但我在创建标题时遇到了问题。请记住我这样做而不是逐字重新编写代码。我试图创建自己的实现。

＆＃13;

header {
  background-color: #364043;
}

.header__content {
  width: 70%;
  margin: auto;
}

.header__left-content {
  display: inline;
  width: 50%;
}

.header__nav ul {
  display: inline;
}

.header__nav li {
  line-height: 0px;
  display: inline-block;
  vertical-align: middle;
}

.header__logo {
  padding-right: 25px;
}

.header__nav-link {
  padding-right: 15px;
}

＆＃13;

<html>

<body>
  <header>
    <div class="header__content">
      <div class="header__left-content">
        <div class="header__nav">
          <ul>
            <li class="header__logo">
              <img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
            </li>
            <li class="header__nav-link">
              <a href="google.com">Topics</a></li>
            <li class="header__nav-link">
              <a href="google.com">Print Edition</a>
            </li>
            <li class="header__nav-link">
              <a href="google.com">More</a>
            </li>
          </ul>
        </div>
      </div>
      <!--         <div class="header__separator"></div> -->
      <div class="header__site-functions">
        <p>right</p>
      </div>
    </div>
  </header>
  <div class="container"></div>
</body>

</html>

＆＃13;

我无法获取段落元素，并最终将其容器放在右侧，如文章中所示。

对此的想法？

Answer 1

您可以在包裹标题左/右部分的元素上使用display: flex; justify-content: space-between;，将这些元素放在由剩余可用空格分隔的行中。您可以使用align-items垂直对齐该内容。

header {
  background-color: #364043;
}

.header__content {
  width: 70%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__left-content {
  display: inline;
  width: 50%;
}

.header__nav ul {
  display: inline;
}

.header__nav li {
  line-height: 0px;
  display: inline-block;
  vertical-align: middle;
}

.header__logo {
  padding-right: 25px;
}

.header__nav-link {
  padding-right: 15px;
}

<header>
  <div class="header__content">
    <div class="header__left-content">
      <div class="header__nav">
        <ul>
          <li class="header__logo">
            <img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
          </li>
          <li class="header__nav-link">
            <a href="google.com">Topics</a></li>
          <li class="header__nav-link">
            <a href="google.com">Print Edition</a>
          </li>
          <li class="header__nav-link">
            <a href="google.com">More</a>
          </li>
        </ul>
      </div>
    </div>
    <!--         <div class="header__separator"></div> -->
    <div class="header__site-functions">
      <p>right</p>
    </div>
  </div>
</header>
<div class="container"></div>

Answer 2

这是因为你的class="header__site-functions"是ablock元素并且占据宽度的100％，所以它不适合一行。您可以使用浮动元素来修复它：

＆＃13;

header {
  background-color: #364043;
}

.header__content {
  width: 70%;
  margin: auto;
}

.header__left-content {
  display: inline-block;
  width: 50%;
}

.header__nav ul {
  display: inline;
}

.header__nav li {
  line-height: 0px;
  display: inline-block;
  vertical-align: middle;
}

.header__logo {
  padding-right: 25px;
}

.header__nav-link {
  padding-right: 15px;
}
.header__site-functions{
    float:right;
}

＆＃13;

<html>

<body>
  <header>
    <div class="header__content">
      <div class="header__left-content">
        <div class="header__nav">
          <ul>
            <li class="header__logo">
              <img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
            </li>
            <li class="header__nav-link">
              <a href="google.com">Topics</a></li>
            <li class="header__nav-link">
              <a href="google.com">Print Edition</a>
            </li>
            <li class="header__nav-link">
              <a href="google.com">More</a>
            </li>
          </ul>
        </div>
      </div>
      <!--         <div class="header__separator"></div> -->
      <div class="header__site-functions">
        <p>right</p>
      </div>
    </div>
  </header>
  <div class="container"></div>
</body>

</html>

＆＃13;

在调整标题内容时遇到问题

2 个答案: