0

私が取り組んでいるプロジェクトのナビゲーション バーを使用しています。私は常に水平方向のナビゲーション バーに問題を抱えており、適切な解決策をあらゆる場所で探しましたが、成功しませんでした。ナビゲーション バーが左に移動したため、CSS にパディングを追加したところ、中央に配置されましたが、テキストが中央に配置されておらず、最初のリンクのホバー効果が「ボックス」全体をカバーしていません。テキストが入っています。

CSS:

/* Entire Document CSS */
html{
    height: 100%;
}
/* Header CSS */
.headers{
    color: #FFFFFF;
    text-align: center;
    padding: 30px;
    margin-bottom: 0px;
    margin-top: 0px;
    background-color: #63B8FF;
}
.headers2{
    color: #FFD89A;
    text-align: center;
    padding: 10px;
}
/* Body CSS */
.body{
    background-color: #61B329;
    height: 50%;
    color: #FFFFFF;
}
.container{
    margin-left: auto;
    margin-right: auto;
    width: 50em;
    text-align: center;
    padding-bottom: 500px;
    height: 50%;
}
/* Navigation CSS */
.nav{
    display: inline-block;
    background-color: #00B2EE;
    border: 1px solid #000000;
    border-width: 1px 0px;
    margin: 0px 0px 0px 0px;
}
.nav li{
    display: inline-block;
}
.nav a{
    display: inline-block;
    padding: 10px 110px 10px 0.80px;
    text-align: center;
}
/* Footer CSS */
#footer {
 clear: both;
 position: relative;
 z-index: 10;
 height: 3em;
 margin-top: -3em;
}
#content {
    padding-bottom: 3em;
}
/* Link CSS */
a:link{
    color: #FFFFFF;
    text-decoration: none;
}
a:visited{
    color: #FFFFFF;
    text-decoration: none;
}
a:hover{
    background-color: #028482;
    color: #FFFFFF;
    text-decoration: overline;
}
a:active{
    background-color: #FF9C00;
    color: #FFFFFF;
    text-decoration: underline;
}
.Links A:hover{
    color: #028482;
    background-color: transparent;
    text-decoration: underline overline;
}

HTML5 (インデックスページ)

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Play - Learn - Grow</title>
        <link rel="stylesheet" href="main.css">
    </head>

    <body class="body">

        <h1 class="headers">Welcome to KUBE Toy Library!</h1>

        <nav>
            <ul class="nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="contact.html">Contact Us</a></li>
                <li><a href="membership.html">Become a Member</a></li>
                <li><a href="borrow.html">Borrow Toys</a></li>
                <li><a href="policies.html">Our Policies</a></li>
                <li><a href="sitemap.html">Site Map</a></li>
            </ul>
        </nav>

        <h2 class="headers2">Welcome to the Home Page!</h2>

        <div class="container">

            Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
            their cognitive, social, emotional and physical development in the important first six years of their lives.

            <br><br><span class="Links">Be sure to check out our Wikispace site with more information <a href="http://mysocialmediatools-pn.wikispaces.com/">here</a>!</span>

        </div>

        <div id="content"></div>

        <div id="footer">
            Copyright &copy 2013
        </div>


      </body>

</html>

私はこのフォーラムの他の人に比べてかなり新しいので、気楽にやってください! :) また、これは私が与えられた任務のための架空の会社などです. ありがとう！

4

2 に答える 2

0

デモ: http://jsfiddle.net/NphBK/

これはよくある問題です。text-align: centerしかし、これを修正するには、親を作成して子に与える必要がありますdisplay: inline-block;

完全にイコライジングしたい場合は、 と に切り替える必要がありdisplay: tableますdisplay: table-cell。

于 2013-10-31T09:39:45.343 に答える
0

こんにちは、私のブラウザのページは次のように表示されました ここに画像の説明を入力

CSS を変更して、ブラウザーの解像度に依存しないようにしました。UI 開発者として、オーバーラインが見栄えが悪いと感じたので、それを削除しました。私のコードを使用

/* Body CSS */
.body {
    background-color: #61B329;
    color: #FFFFFF;
}

/* Header CSS */
.headers {
    color: #FFFFFF;
    text-align: center;
    padding: 30px;
    margin: 0;
    background-color: #63B8FF;
}

.headers2 {
    color: #FFD89A;
    text-align: center;
    padding: 10px;
}

.container {
    margin: 0 auto;
    width: 50em;
    text-align: center;
    padding-bottom: 500px;
}

/* Navigation CSS */
.nav {
    display: inline-block;
    background-color: #00B2EE;
    border: 1px solid #000000;
    border-width: 1px 0px;
    margin: 0;
    padding: 0;
    min-width: 1000px;
    width: 100%;
}

.nav li {
    list-style-type: none;
    width: 14.28%;
    float: left;
}

.nav a {
    display: inline-block;
    padding: 10px 0;
    width: 100%;
    text-align: center;
}

/* Footer CSS */
#footer {
 clear: both;
 position: relative;
 z-index: 10;
 height: 3em;
 margin-top: -3em;
}

#content {
    padding-bottom: 3em;
}

/* Link CSS */
a:link,
a:visited,
a:hover {
    color: #FFFFFF;
    text-decoration: none;
}

a:hover {
    background-color: #028482;
}

a:active {
    background-color: #FF9C00;
    color: #FFFFFF;
    text-decoration: underline;
}

.Links A:hover {
    color: #028482;
    background-color: transparent;
    text-decoration: underline overline;
}
于 2013-10-31T10:22:58.163 に答える