左のliテキストを左揃えにし、h3タグの下に水平ナビゲーションを設定するにはどうすればよいですか？

ページの左側にナビゲーションバーメニューを配置したいページがあります。私はタグのテキストを左側に揃えるのに苦労しています。私は3つの要素a、ul、liのすべてに対してテキストの整列を試みましたが、それでも問題は解決しませんでした。また、私は水平ナビゲーションバーに問題があります。 contentMain divのh3タグに揃えたいと思います。なぜ私の2つのdivがお互いに隣にいないのか分かりません。誰かが私のコードがオフであることが分かると私に知らせてください。ありがとう。左のliテキストを左揃えにし、h3タグの下に水平ナビゲーションを設定するにはどうすればよいですか？

div.container { 
 
     width: 100%; 
 
     height: 100%; 
 
    } 
 
    .navMenuLeft { 
 
     width: 180px; 
 
    padding-bottom: 10px; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    position: relative; 
 
    vertical-align: top; 
 
    float: left; 
 
    display: block; 
 
    background-color: white; 
 
    } 
 
    .navMenuLeft h3 { 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    margin-bottom: 0; 
 
    background-color: #000099; 
 
    color: white; 
 
    text-align: left; 
 
    padding-left: 5px; 
 
    } 
 
    .contentMain h3 { 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    background-color: #000099; 
 
    color: white; 
 
    text-align: left; 
 
    padding-left: 5px; 
 
    } 
 
    .hfNavLeft { 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    } 
 
    .hfNavLeft ul { 
 
    list-style: none; 
 
    text-align: left; 
 
    background-color: #d3d3d3; 
 
    } 
 
    .hfNavLeft li { 
 
    text-align: left; 
 
    } 
 
    .hfNavLeft a { 
 
    color: black; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    } 
 
    .hfNavLeft a:hover { 
 
    color: #999999; 
 
    } 
 
    .contentMain { 
 
    margin-left: 5px; 
 
    padding-bottom: 10px; 
 
    padding-left: 5px; 
 
    position: relative; 
 
    vertical-align: top; 
 
    float: left; 
 
    display: block; 
 
    background-color: white; 
 
    min-width: 800px; 
 
    }

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
\t <meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" /> 
 
\t <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t <title>Home</title> 
 
\t 
 
\t 
 
</head> 
 
<body> 
 
\t <div class="container"> 
 
\t \t <div class="navMenuLeft"> 
 
\t \t \t <h3>Menu</h3> 
 
\t \t \t <nav class="hfNavLeft"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="Reports/hfReports.cfm">Reports</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </nav> 
 
\t \t </div> 
 
\t \t <div class="contentMain"> 
 
\t \t \t <h3>Home</h3> 
 
\t \t \t <nav class="hfNavTop"> 
 
\t \t \t \t <a href="#" class="tablinks">Demographic</a> 
 
\t \t \t \t <a href="#" class="tablinks">Adult</a> 
 
\t \t \t </nav> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

出典

2017-05-20 espresso_coffee

を追加しますか？そうすれば私は助けることができるかもしれません。 –

私は左に揃えるためにテキストレポートが必要です。それはliタグ内にある。また、hfNavTopクラスのナビゲーションバーをh3タグのホームの下に配置する必要があります。 –

それはあなたが望むものを言うのは難しいです...しかし、私は、[レポート]アライメントを説明することができます。 ulタグにあります。デフォルトのパディングとマージンがあります。 text-align: left;は、すべての要素の既定値です。

https://jsfiddle.net/sheriffderek/tLbbzqws/

<aside class='sidebar'> 
    <h2>Menu</h2> 
    <nav class='y-navigation'> 
    <ul class='item-list'> 
     <li class='item'> 
     <a href='#'>Reports</a> 
     </li> 
    </ul> 
    </nav> 
</aside> 

<section class='main-content'> 
    <h1>Content</h1> 
    <nav class='x-navigation'> 
    <ul class='item-list'> 
     <li class='item'> 
     <a class='link' href="#">Demographic</a> 
     </li> 
     <li class='item'> 
     <a class='link' href='#'>Adult</a> 
     </li> 
    </ul> 
    </nav> 
</section>

...

ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.sidebar { 
    width: 100%; 
    max-width: 30%; 
    float: left; 
    background: lightgreen; 
} 

.main-content { 
    width: 100%; 
    max-width: 70%; 
    float: left; 
    background: lightblue; 
}

出典

2017-05-20 04:15:27 sheriffderek

私は脇見タグとセクションタグを使用しています。テーブルをセクションの内側に置くことはできますか？これらのタグはHTML5タグですか？ご協力いただきありがとうございます。 –

はい、HTML5タグです。そうです。あなたが望むものを置くことができます。一部の人は、セクションが記事でのみ使用されるべきだと主張しますが、開発者はこれらのことが最終的にどのように機能するかを実際に決定することになります。 – sheriffderek

時間を割いてタグの説明と説明をしてくれてありがとう。 –

私はあなたのコードにいくつかの変更を加えました。これはあなたが達成したいことですか？ .navMenuLeftと.contentMainの隣にありますか？

body { 
 
    margin: 0; 
 
} 
 

 
div.container { 
 
    width: 100vw; 
 
    height: 100%; 
 
    
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.navMenuLeft { 
 
    width: 180px; 
 
} 
 
.navMenuLeft h3 { 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    margin-bottom: 0; 
 
    background-color: #000099; 
 
    color: white; 
 
    padding-left: 5px; 
 
} 
 
.contentMain h3 { 
 
    background-color: #000099; 
 
    color: white; 
 
    margin: 0; 
 
} 
 
.hfNavLeft { 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
} 
 
.hfNavLeft ul { 
 
    list-style: none; 
 
    background-color: #d3d3d3; 
 
} 
 
.hfNavLeft ul li { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.hfNavLeft a { 
 
    color: black; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 
.hfNavLeft a:hover { 
 
    color: #999999; 
 
} 
 
.contentMain { 
 
    flex-grow: 1; 
 
    padding: 0 1rem; 
 
} 
 
.contentMain .hfNavTop { 
 
    margin-top: 12px; 
 
}

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
\t <meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" /> 
 
\t <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t <title>Home</title> 
 
\t 
 
\t 
 
</head> 
 
<body> 
 
\t <div class="container"> 
 
\t \t <div class="navMenuLeft"> 
 
\t \t \t <h3>Menu</h3> 
 
\t \t \t <nav class="hfNavLeft"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="Reports/hfReports.cfm">Reports</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </nav> 
 
\t \t </div> 
 
\t \t <div class="contentMain"> 
 
\t \t \t <h3>Home</h3> 
 
\t \t \t <nav class="hfNavTop"> 
 
\t \t \t \t <a href="#" class="tablinks">Demographic</a> 
 
\t \t \t \t <a href="#" class="tablinks">Adult</a> 
 
\t \t \t </nav> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

出典

2017-05-20 04:17:27

私はあなたが必要とわかりません。左側の要素を左揃えにする場合は、はちょうどあなたがあなたが作るしようとしているものをスケッチすることができます

ul{ padding: 0; }

出典

2017-05-20 04:29:10 truonghungit

左のliテキストを左揃えにし、h3タグの下に水平ナビゲーションを設定するにはどうすればよいですか？

答えて

関連する問題