Question

我希望文字和图标（登录，商店）与＆＃39;徽标＆＃39;相同。但就在右边。我试着加入＆＃39; .shop-icon＆＃39; {margin：-30px auto;}但是这一切都破坏了页面，然后是整个导航栏＆＃39;和＆＃39;文章＆＃39;覆盖了标题。

我还在学习，但一开始我就知道我已经破坏了什么。

＆＃13;

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #2B2B2B;
  font-size: 1.6rem;
}

.header-front {
  max-width: 992px;
  margin: 0 auto;
}

h1.logo {
  color: #F6F6F6;
  font-size: 4.8rem;
  font-weight: 700;
  text-align: left;
}

.shop-icon {
  text-align: right;
}

.bag,
.account {
  color: #F6F6F6;
  text-decoration: none;
  text-transform: uppercase;
  margin: 10px;
}

.main-menu {
  background-color: #F7FCFA;
  width: 100%;
}

p {
  color: #FFFFFF;
}

＆＃13;

<body>
  <header class="header-front">
    <h1 class="logo">Logo </h1>
    <div class="shop-icon">
      <a href="_blank" class="account">
            Login <i class="fa fa-user-o" aria-hidden="true"></i>
            </a>

      <a href="_blank" class="bag">
            shop <i class="fa fa-shopping-bag" aria-hidden="true"></i>
            </a>
    </div>

  </header>

  <nav class="main-menu">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultrices elit eget tortor varius ornare. Etiam commodo sapien dui, in gravida purus malesuada eget. Vestibulum mollis ipsum consectetur ipsum tempor, non sagittis nunc gravida. Aenean
      dolor arcu, faucibus a urna nec, pulvinar mollis erat. Pellentesque scelerisque sapien purus, eget porta tellus lacinia ut. Aenean vel ipsum tortor. Ut faucibus sagittis lorem, a molestie enim commodo vel. Maecenas ac placerat nisl. Phasellus felis
      elit, tincidunt nec ullamcorper vitae, interdum non leo. </p>
  </article>
</body>

</html>

＆＃13;

Answer 1

您可以简单地使用flex。在容器中指定display:flex并在align-items: center中指定元素垂直对齐。然后，您将flex:1指定为shop-icon，以便占用剩余空间，并且您已将其元素右对齐。

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #2B2B2B;
  font-size: 1.6rem;
}

.header-front {
  max-width: 992px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

h1.logo {
  color: #F6F6F6;
  font-size: 4.8rem;
  font-weight: 700;
  text-align: left;
}

.shop-icon {
  text-align: right;
  flex: 1;
}

.bag,
.account {
  color: #F6F6F6;
  text-decoration: none;
  text-transform: uppercase;
  margin: 10px;
}

.main-menu {
  background-color: #F7FCFA;
  width: 100%;
}

p {
  color: #FFFFFF;
}

<body>
  <header class="header-front">
    <h1 class="logo">Logo </h1>
    <div class="shop-icon">
      <a href="_blank" class="account">
            Login <i class="fa fa-user-o" aria-hidden="true"></i>
            </a>

      <a href="_blank" class="bag">
            shop <i class="fa fa-shopping-bag" aria-hidden="true"></i>
            </a>
    </div>

  </header>

  <nav class="main-menu">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultrices elit eget tortor varius ornare. Etiam commodo sapien dui, in gravida purus malesuada eget. Vestibulum mollis ipsum consectetur ipsum tempor, non sagittis nunc gravida. Aenean
      dolor arcu, faucibus a urna nec, pulvinar mollis erat. Pellentesque scelerisque sapien purus, eget porta tellus lacinia ut. Aenean vel ipsum tortor. Ut faucibus sagittis lorem, a molestie enim commodo vel. Maecenas ac placerat nisl. Phasellus felis
      elit, tincidunt nec ullamcorper vitae, interdum non leo. </p>
  </article>
</body>

</html>

Answer 2

您可以在position元素上设置absolute shop-icon。

.shop-icon {
  position: absolute;
  left: 120px;
  top: 26px;
}

如果所需位置位于页面的右侧，则可以使用right: 10px代替left位置。

这是一个片段：

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #2B2B2B;
  font-size: 1.6rem;
}

.header-front {
  max-width: 992px;
  margin: 0 auto;
}

h1.logo {
  color: #F6F6F6;
  font-size: 4.8rem;
  font-weight: 700;
  text-align: left;
}

.shop-icon {
  position: absolute;
  left: 120px;
  top: 26px;
}

.bag,
.account {
  color: #F6F6F6;
  text-decoration: none;
  text-transform: uppercase;
  margin: 10px;
}

.main-menu {
  background-color: #F7FCFA;
  width: 100%;
}

p {
  color: #FFFFFF;
}

<body>
  <header class="header-front">
    <h1 class="logo">Logo </h1>
    <div class="shop-icon">
      <a href="_blank" class="account">
            Login <i class="fa fa-user-o" aria-hidden="true"></i>
            </a>

      <a href="_blank" class="bag">
            shop <i class="fa fa-shopping-bag" aria-hidden="true"></i>
            </a>
    </div>

  </header>

  <nav class="main-menu">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultrices elit eget tortor varius ornare. Etiam commodo sapien dui, in gravida purus malesuada eget. Vestibulum mollis ipsum consectetur ipsum tempor, non sagittis nunc gravida. Aenean
      dolor arcu, faucibus a urna nec, pulvinar mollis erat. Pellentesque scelerisque sapien purus, eget porta tellus lacinia ut. Aenean vel ipsum tortor. Ut faucibus sagittis lorem, a molestie enim commodo vel. Maecenas ac placerat nisl. Phasellus felis
      elit, tincidunt nec ullamcorper vitae, interdum non leo. </p>
  </article>
</body>

</html>

在一个序列中放置两个元素

2 个答案: