Question

我创建了一个基本的水平导航栏。它有您的通用选项：主页，联系我们，关于和游戏。然而，即使联系我们，游戏和主页是紧密联系在一起，我想这样做是在网页/导航栏的另一侧，远离其他人但仍然通过一个巨大的空白空间连接到它导航栏。我该怎么做呢？下面是我目前的CSS代码，如果它有帮助：

.horiznavli {
    display: inline;
    padding:20px 32px 20px;
    border-color: #333333;
    background-color: #333;
  color:white;
  text-align: center;
  font-family: "Lucida Grande", Times, Serif

}

.horiznavli:hover{

background-color: #4CAF50;
}

.horiznavli:active{
    background-color: grey;
}

#HorizNav{

    position: relative;
    left: -60px

}

#HorizNav #spaced {


}

编辑：我在此道歉是HTML代码：

<!DOCTYPE HTML>

<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="frontpage.css">
        <meta charset="UTF-8">
        <meta name="description" content="Official Dark Matter Studios site">
        <meta name="keywords" content="HTML, Studio, Game, Dark Matter">
        <meta name="author" Content="Matt Jones">

        <title> Dark Matter Studios </title>

    </head>

<body>
<ol id = "HorizNav" style = "list-style-type:none">
<li class = "horiznavli"> HomePage </li>
<li class = "horiznavli"> About </li>
<li class = "horiznavli"> Games </li>
<li class = "horiznavli" id = "spaced"> Conact Us </li>
</ol>




<h1 id="title_screen"> Dark Matter Studios</h1>
    <div id="wrapper">

    <h1> What is Dark Matter Studios all about? </h1>

        <p> Dark Matter studios is an independent game development dedicated to producing quality games out of a passion and love for gaming.<br>
        Born from the frustration of anti-consumerism, microtransactions and DLC eccentric practices held by many AAA companies </p>    

<br>
<br>
    <h1> WHAT WE'RE ALL ABOUT </h1> 

    <p> Dark Matter Studios was founded around the principle of honesty and integrity with our fans. After all, without them we wouldn't get anywhere! Though Dark Matter studios holds itself responible the following standards: </p>

    <ol style="list-style-type: circle">
    <li> Honesty with our customers. </li>
    <li> No Microtransactions or overpriced DLC</li>
    <li> We are honest with our customers, we don't promise things and not deliver</li>
    <li> We promise high quality games, with no graphical downgrades on release</li>
    <li> We stick to our word, we do not mislead our customers to gain a quick buck off them</li>
    </ol>

    </div>



</body>

</html>

Answer 1

.horiznavli {
   float:left;
    padding:20px 32px 20px;
    border-color: #333333;
    background-color: #333;
  color:white;
  text-align: center;
  font-family: "Lucida Grande", Times, Serif

}

.horiznavli:hover{

background-color: #4CAF50;
}

.horiznavli:active{
    background-color: grey;
}

#HorizNav{

    position: relative;
    left: -60px

}

#HorizNav #spaced {


}

#HorizNav.ul li:nth-child(3)
{
    float:right!important;
    margin-left:100px!important;
}

Answer 2

如果您添加了html代码，那就更好了。无论如何，如果你使用bootstrap，你可以使用这个代码而不需要css。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Homepage <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Games</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">About</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

否则，如果您仅使用html和css，请使用此代码。

<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
 </head>
<body>

<ul>
   <li><a href="#home">Home</a></li>
   <li><a href="#news">Games</a></li>
   <li><a href="#contact">Contact</a></li>
   <li style="float:right"><a href="#about">About</a></li>
</ul>

</body>

告诉我这是否是你想要的。

在水平导航栏的选项之间放置空格

2 个答案: