Question

我正在制作一个由两个主要导航栏组成的网站，标题中有一个，侧面有主导航栏。（请注意，网站已经接近完成，因此暂时忽略设计）。

我希望我能得到一些帮助，看来我正在尝试编辑的div块...不会在CSS中编辑。这让我很困惑，这就是我发帖子的原因。

正如您在上面的JSFiddle中所说，当您在jsfiddle上编辑 .info 类时，没有任何内容会更改标题中的内容。即使我告诉它浮动：对，我没有结果。这种情况发生的原因和解决方案将不胜感激。谢谢！

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="homepage.css">
  <title>CSGOMarble</title>
</head>
<body> 
<div class="info">  
<ul>
  <li><a href="tos.html">Terms of Service</a></li>
  <li><a href="faq.html">FAQ</a></li>
</ul>   
</div>  
<div class="logo">
  <a href="homepage.html">
  <img src="logo.png" alt="LOGO" height="60px" width="200px">
  </a>
</div>

<hr>

<div class="navbar">
    <ul>
      <li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li>
      <li><a href="jackpot.html">JACKPOT</a></li>
      <li><a href="coinflip.html">COINFLIP</a></li>
      <li><a href="roulette.html">ROULETTE</a></li>
      <li><a href="giveaway.html">GIVEAWAY</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
</div>
<div class="container">
  <img src="logo.png" alt="logo">
  <br>
  <b><p style="font-size: 16.8px; color: grey; margin-top: 25px;">Welcome to CSGOMarble, the greatest CSGO gambling experience! CSGOMarble aims to be the best used, most trusted and respected of CSGO gambling. We all love to win, and we would like almost everyone to experience that. With CSGOMarble, not only will you be welcomed by a loving community, we will also be here to support you during your difficult times, that's why we have our, customer support and hard-working staff at your disposal. You'll be happy you decided to gamble with us!</p></b>
  <br>
  <a href="SIGNIN.HTML">
  <img src="LOGINMAIN.png" alt="SIGN IN WITH STEAM" style="margin-top: 5px;">
  </a>
</div>
</body>
</html>

CSS：

body {
font-family: Arial, Verdana, sans-serif;
background-color: #232a30;
}
.logo {
margin-left: 25px;
}
.navbar {
    margin-top: 50px;
    margin-left: 40px;
    padding: 0;
    font-size: 15px;
    float: left;
    display: inline-block;
    z-index: 2;
    position: fixed;
}

.container {
    width: 1000px;
    height: 500px;
    margin-top: 20px;
    font-size: 25px;
    display: inline-block;
    text-align: center;
    z-index: 1;
    margin-left: 450px;
}
.navbar a {
text-decoration: none;
color: black;
}
.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 250px;
    background-color: #f1f1f1;
    border: 2px solid #b4b6bd;;
}

.navbar li a {
    display: block;
    color: #000;
    padding: 15px 0 15px 0;
    text-decoration: none;
}
.navbar li a:hover {
    background-color: #555;
    color: white;
}
.navbar li {
    text-align: center;
    border-bottom: 1px solid #555;
    font-size: 18px;
}

.navbar li:last-child {
    border-bottom: none;
}
.signin {
margin-left: 500px;
margin-top: -600px;
}
.info{
}

Answer 1

您必须单独选择a - 锚标记。如下：

.info {
  float: right;
}
.info a{
  text-decoration: none;
  }

选中此项： Fiddle

HTML - 一页上有两个导航栏

1 个答案: