Question

我正在尝试建立一个网站，我的部分代码中包含一个引用段，我的想法就是我需要一些社交链接。

不幸的是，我的社交链接会跳到我的报价栏下面的一行，而不是在同一行，我不知道为什么。

继承我的HTML：

<div class="quote--bar">
<div class="quote">
"To create an environment in which knowledge <br />
about information and its sphere can be obtained"
</div>
<nav class="socialImageContainer">
    <ul>
        <li><a href="#" class="logos twitterLogo"></a></li>
        <li><a href="#" class="logos instagramLogo"></a></li>
        <li><a href="#" class="logos facebookLogo"></a></li>
        <li><a href="#" class="logos tumblrLogo"></a></li>
        <li><a href="#" class="logos linkedInLogo"></a></li>
    </ul>
</nav>

我的LESS：

.quote--bar {
 padding-top: 20px;
 background: @BGColor2;
 display: inline-block;
 .quote {
  font-size: 24px;
  font-family: 'Merriweather', serif;
  color: @TXTColor2;
 }
}
.socialImageContainer {
 .logos {
  margin: 20px 0;
  float: right;
  width: 51px;
  height: 51px;
}
ul {
  list-style: none;
}
li {
  display: inline-block;
}

如果你知道我可能做错了什么，我将非常感激！

Answer 1

默认情况下，

nav和div有display:block，因此导航将显示在前一个div下方。

你可能想要浮动导航而不是里面的链接。此外，前面的div也需要是display:inline-block或float:left。

.quote--bar {
 padding-top: 20px;
 background: @BGColor2;
 display: inline-block;
 .quote {
  float: left; /* <-- this one */
  font-size: 24px;
  font-family: 'Merriweather', serif;
  color: @TXTColor2;
 }
}
.socialImageContainer {
  float: right; /* <-- and this one */
  .logos {
   margin: 20px 0;
   width: 51px;
   height: 51px;
 }
 ul {
   list-style: none;
 }
 li {
   display: inline-block;
 }
}

CSS：nav元素跳转到新行

1 个答案: