水平ナビゲーションバーのオプション間にスペースを置く

私は基本的な水平ナビゲーションバーを作成しました。それはあなたの一般的なオプションを持っています：ホームページ、お問い合わせ、about、ゲーム。しかし、私たちに連絡してもゲームやホームページは近くにありますが、私はそれを他のものから遠く離れているWebページ/ナビゲーションバーの反対側に置いていますが、それでも巨大な空きスペースナビゲーションバーのこれをどうやってやりますか？それが助け場合は、以下の私の現在の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>

出典

2017-07-13 Matt Jones

投稿するHTMLコードもありますかここで試してみてください –

別のulで 'about'を付けて、それを右に浮かべてください –

.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; 
}

出典

2017-07-13 04:43:45

コード専用の回答は避けてください。代わりに、あなたのコードが何をしているのか、それがどのようにして問題を解決するのかを説明してください。 – Mistalis

あなたが同様にあなたのHTMLコードを追加した場合、それが良いでしょう。とにかくブートストラップを使用している場合、このコードを使用することができ、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>

これが欲しいのかどうか教えてください。

出典

2017-07-13 05:50:21

水平ナビゲーションバーのオプション間にスペースを置く

答えて

関連する問題