0

Codeacademy を使用して HTML/CSS と JavaScript+jQuery を学習し、自分の小さなプロジェクトで練習しようとしています。ただし、非常に単純な問題に悩まされています。

ページ全体に親 div を表示したい。これを正常に実行できます（フィドラーを参照）。ただし、ブラウザ画面のサイズを変更すると; 親 div がページ全体に収まらなくなり、その右端の子 div が親 div の外に表示されます (フィドラーを参照)。基本的に、親 div が常に子 div をラップし、常に画面全体に表示されるようにします。

フィドラーのリンク:

関連する HTML:

<div id="topnav">
            <a id="logo" class="navlink clearfix">DreamTeam</a>
            <a id="logo" class="navlink clearfix">Strikers</a>
            <a id="logo" class="navlink clearfix">Midfielders</a>
            <a id="logo" class="navlink clearfix"><div class="navlink clearfix">Defenders</a>
            <a id="logo" class="navlink clearfix">Goalkeepers</a>
        </div>

関連する CSS:

/* ID FOR PARENT DIV */
#topnav {
position: relative;
background-color: #EDEDED;
height: 70px;
width: 100%;
white-space: nowrap;
}

#logo {
width: 300px;
font-weight: bold;
margin-left: 5px;
font-size: 28px;
height: auto;
}

#lastlink {
border: none;
}

/* CLASS FOR CHILD DIVS */
.navlink {
position: relative;
font-family: Century Gothic;
height: auto; 
font-size: 24px;
text-align: left;
line-height: 65px; 
width: 175px;
border-right: 1px solid #bdbdbd;
}

どんな助けでも大歓迎です。私は多くの Google 検索やその他のスタック オーバーフローの投稿を調べてきましたが、適切な投稿を完全に見逃していない限り、何もうまくいかないようです。「overflow: hidden」などを使用したり、ラッパー div を作成したりしても、実際にはうまくいきませんでした。ご提案いただきありがとうございます。私が見逃したかもしれない適切な投稿を誰かが私に指摘してくれたら、それは素晴らしいことです.

4

2 に答える 2

0

タグ内の div タグを削除するのはどうですか。タグ付きのクラスを使用できるためです。

StackOverflow ユーザーstarxが提供する次の例を見てください。

CSS

a.divlink { 
     display:block;
     width:500px;
     height:500px; 
     float:left;
}

HTML

<div>
    <a class="divlink" href="yourlink.html">
         The text or elements inside the elements
    </a>
    <a class="divlink" href="yourlink2.html">
         Another text or element
    </a>
</div>

詳細はこちら

于 2013-06-27T09:06:20.133 に答える