横と縦のサイドバーの間隔を設定する方法

私は基本的な質問について事前にコード化し謝罪することを学んでいます。私はコード作成を学ぶために特に使用されるWebページを作っています。私は2つのサイドバーを実装していますが、それらが重なっています。コードは次のとおりです。

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 99% 
 
    } 
 
    ul.vertical { 
 
    list=-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
\t overflow: auto; 
 
\t background-color: #333; 
 
\t width: 200px; 
 
\t position: fixed; 
 
\t } 
 
    li.sidebar { 
 
    text-align: center; 
 
    border-bottom: 1px solid #555; 
 
    } 
 

 
    li:last-child { 
 
\t border-right: none; 
 
\t border-bottom: none; 
 
    } 
 
    li a{ 
 
\t display: block; 
 
\t color: white; 
 
\t padding: 14px 16px 
 
\t text-align center; 
 
\t text-decoration: none; 
 
\t font-size: 20px; 
 
\t 
 
    } 
 
    li a:hover:not(.active) { 
 
\t background-color: #111; 
 
    } 
 
    .active { 
 
    \t background-color: #4CAF50; 
 

 
    }

<ul> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li style="float:right"><a class="active" href="#about">About</a></li> 
 
     <li style="float:right"><a href="#search">search</a></li> 
 
     <li style="float:left"><a href="#login">Login</a></li> 
 
    <li style="float:left"><a href="#register">Register</a></li> 
 
    </ul> 
 
    <ul class="vertical"> 
 
    <li><a class="active" href="#zero">zero</a></li> 
 
    <li style=" sidebar float:right"><a class="active" href="#one">one</a></li> 
 
     <li style=" sidebar float:right"><a href="#two">two</a></li> 
 
     <li style=" sidebar float:left"><a href="#three">three</a></li> 
 
    <li style="sidebar float:left"><a href="#four">four</a></li> 
 
    </ul>

出典

2017-07-12 Verkai

あなたが必要なものを描くことができますか？ style = "sidebar float：right"スタイルからサイドバーを削除する必要があります –

あなたは間違いなく私たちに画像を見せたり、あなたがしようとしていることのより良い説明を与えてください。質問が現時点で書かれているので、本当に不明です。 * "私は2つのサイドバーが実装されていますが、重なり合っているので、一番上のバーが右に押し出されます。これを修正するにはどうすればいいですか？" *正しい方法は、あなたが何をしたいかによって異なります。。 https://stackoverflow.com/help/how-to-ask –

あなたのコードスニペットには、あなたが説明している問題は表示されません。 –

私はあなたが助けを差し伸べることにうれしい、それは時々混乱することができます。しかし、あなたが進むにつれてそれはより簡単になります。まず、あなたのCSSプロパティのいくつかが間違って書かれています。私は以下の強調表示3つのミス...

ul.vertical { 
    list=-style-type: none; 
} 

ul { 
    padding 0; 
} 

li a { 
    padding: 14px 16px 
    text-align center; 
}

次の二つ欠けているコロンのと同様に、セミコロンに気づきます。そして最初のものはプロパティに等号が追加されています。エラーを読み込んだり探したりするのに最適なコードになるように、コードを実際に構築する必要があります。私はあなたの間隔が非常に矛盾していることに気づいた。また、HTML文書にスタイルを追加しました。これは、すでに外部スタイルシートを使用しているときに慣れてしまう悪い習慣です。

2つのdiv間にスペースを追加するには、marginプロパティを第1および第2のサイドバーセレクタクラスの両方に使用できます。コードをコピーして学習することができるという例を紹介します。

// HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Sidebars</title> 
    <link rel="stylesheet" href="styles.css"> 
    </head> 
    <body> 

     <div class="sidebar1"> 
     <ul> 
      <li>About</li> 
      <li>Search</li> 
      <li>Login</li> 
      <li>Register</li> 
     </ul> 
     </div> 

     <div class="sidebar2"> 
     <ul> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
      <li>Four</li> 
     </ul> 
     </div> 

    </body> 
</html>

// CSS

.sidebar1 { 
    float: left; 
    width: 100px; 
    height: 200px; 
    margin: 0 5px 0 0; 
    background-color: grey; 
} 

.sidebar2 { 
    float: left; 
    width: 100px; 
    height: 200px; 
    margin: 0 0 0 5px; 
    background-color: lightgrey; 
} 

ul { 
    margin: 0; 
}

あなたは私が私の余白に4桁の数字を追加しました見ることができるように、左からこれらの4桁が右に行く右上-ボトム左。つまり、最初のサイドバーの右側に5ピクセルの余白が追加され、2番目のサイドバーの左側に5ピクセルの余白が追加されていることがわかります。パッディングの合計が10ピクセルの場合。

私はこれがあなたを助けてくれることを願っており、すっきりとしたコードの良い例を教えてくれました。 :)

出典

2017-07-13 02:08:15

横と縦のサイドバーの間隔を設定する方法

答えて

関連する問題