css 导航栏中的社交媒体

xxhby3vn 于 2023-03-05 发布在其他

关注(0)|答案(2)|浏览(172)

我正在为大学做一个网站，我被卡住了;我试图显示在同一行的导航和徽标的社会媒体链接，但它只是不会工作;导航功能正常，社交图标也可以作为链接使用，但它们不会出现在右上角我想要的位置。
我尝试了大约一百万种格式设置方法，使用不同的div标签、ID、类，到目前为止最好的一种是使用网格，但社交信息不会坐在我想要的地方，而是在页面上蔓延。
这是我的HTML和CSS：

/*Navigation Bar*/

#RLogo {
  padding: 10px
}

.navigation-bar {
  background-color: #EFE9D7;
  height: 100px;
  width: 100%;
}

.pure-menu-list {
  padding: 10px;
  margin: 0px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.pure-menu-list li {
  list-style-type: none;
  padding: 0px;
  height: 24px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: inline;
}

.pure-menu-list li a {
  color: #171a1f;
  font-size: 16px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
  line-height: 70px;
  padding: 5px 15px;
  opacity: 0.7;
}

/*footer*/

footer {
  background-color: #EFE9D7;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name=viewport content="width=device-width, initial-scale=1">
  <title>Rule One</title>
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
  <link rel="stylesheet" href="StyleSheet.css">

</head>

<body>

  <div class="navigation-bar">
    <div class="pure-g">

      <div class="pure-u-1-3">
        <img id="RLogo" src="images/Rlogo.png">
      </div>

      <div class="pure-u-1-3">
        <ul class="pure-menu-list">

          <li class="pure-menu-item">
            <a href="#">Home</a></li>

          <li class="pure-menu-item"><a href="#">Events</a></li>
          <li class="pure-menu-item"><a href="#">Merch</a></li>
          <li class="pure-menu-item"><a href="#">Community</a></li>
          <li class="pure-menu-item"><a href="#">Jobs</a></li>
        </ul>
      </div>

      <div class="pure-u-1-3"></div>
      <ul class="pure-menu-list">
        <li class="pure-menu-item">
          <a href="https://www.youtube.com/@RuleOne"><img id="youtube" src="images/youtube.png"></a>
        </li>
        <li class="pure-menu-item">
          <a href="https://twitter.com/RuleOneGG"><img id="twitter" src="images/twitter.png"></a>
        </li>
        <li class="pure-menu-item">
          <a href="https://www.twitch.tv/ruleonegg"><img id="twitch" src="images/twitch.png"></a>
        </li>
        <li class="pure-menu-item">
          <a href="https://discord.com/invite/ruleone"><img id="discord" src="images/discord.png"></a>
        </li>
        <li class="pure-menu-item">
          <a href="https://www.instagram.com/ruleone.gg/"><img id="instagram" src="images/instagram.png"></a>
        </li>
      </ul>
    </div>
  </div>
  </div>
  </div>

  <div>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur dolorum blanditiis nobis cumque, eum reiciendis quam deserunt animi facilis, omnis voluptatibus doloremque similique? Placeat praesentium totam iste accusantium modi voluptatibus.</p>
  </div>
</body>
<footer> Rule One Esports Team</footer>

</html>

css

来源：https://stackoverflow.com/questions/75632273/social-media-in-nav-bar

2条答案

按热度按时间

4xrmg8kj1#

我假设你现在还没有构建一个响应式设计，下面是你代码中的解决方案。
你有一条线：
但是我猜你忘了把图标列表放在这个div里面。这会解决这个问题。

<div class="pure-u-1-3">
  <ul class="pure-menu-list">
    <li class="pure-menu-item"><a href="https://www.youtube.com/@RuleOne"><img id="youtube" src="images/youtube.png"></a></li>
    <li class="pure-menu-item"><a href="https://twitter.com/RuleOneGG"><img id="twitter" src="images/twitter.png"></a></li>
    <li class="pure-menu-item"><a href="https://www.twitch.tv/ruleonegg"><img id="twitch" src="images/twitch.png"></a></li>
    <li class="pure-menu-item"><a href="https://discord.com/invite/ruleone"><img id="discord" src="images/discord.png"></a></li>
    <li class="pure-menu-item"><a href="https://www.instagram.com/ruleone.gg/"><img id="instagram" src="images/instagram.png"></a></li>
  </ul>
  </div>

我希望这会有帮助。另外，为了使图标更靠右对齐，你可以使用现有类旁边的另一个类，使它浮动到右边。

赞(0）回复(0）举报 2023-03-05

ctehm74n2#

我想我有一些比简单的导航栏中的社交媒体栏更好的东西。它会让你的大学网站更好。它是一个位于页面右侧的悬停媒体栏。它有两个部分-HTML代码，CSS代码。砰!它工作了!这是你需要放在导航栏的div后面的HTML代码：-<div class="float-sm"> <div class="fl-fl float-fb"> <i class="fa fa-facebook"></i> <a href="https://www.facebook.com/" target="_blank"> Like us!</a> </div> <div class="fl-fl float-tw"> <i class="fa fa-twitter"></i> <a href="https://twitter.com/" target="_blank">Follow us!</a> </div> <div class="fl-fl float-gp"> <i class="fa fa-instagram"></i> <a href="https://instagram.com/" target="_blank">Follow us!</a> </div> <div class="fl-fl float-li"> <i class="fa fa-youtube"></i> <a href="https://www.youtube.com/" target="_blank">Subscribe us! </a> </div> </div>
对于CSS代码：-'. fl-fl {
文本转换：大写字母;字母间距：3px;填充：4px;宽度：200px;位置：固定的;正确的：-160px; Z轴索引：1000;字体：正态正态10px Arial;- 网络工具包过渡：全口径.25毫米口径- moz过渡：全口径.25毫米口径- ms跃迁：全口径.25毫米口径- o-跃迁：全口径.25毫米口径过渡：全口径.25毫米口径}

.fa {
    font-size: 20px;
    color: #fff;
    padding: 10px 0;
    width: 40px;
    margin-left: 8px;
}

.fl-fl:hover {
    right: 0;
}

.fl-fl a {
    color: #fff !important;
    text-decoration: none;
    text-align: center;
    line-height: 43px!important;
    vertical-align: top!important;
}

.float-fb {
    background: #3B5998;
    top: 160px;
}

.float-tw {
    background: #55ACEE;
    top: 215px;
}

.float-gp {
    background: #dd4b39;
    top: 270px;
}

.float-li {
    background: #007bb5;
    top: 325px;
}

.float-ig {
    background: #ffa500;
    top: 380px;
}

.float-yt {
    background: #bb0000;
    top: 435px;
}`

赞(0）回复(0）举报 2023-03-05

我来回答

css 导航栏中的社交媒体

2条答案

相关问题

热门标签

最新问答