0

今日はユニークなことを試したので、テンプレートをコーディングすることにしました。

一部のメニューにはタイトルと説明があることをご存知ですか?

例：

ホームページ 私たちのメインページ

Twitter フォローしてね！

メニューは次のようになります。

http://gyazo.com/360b81db32cf61922e9ff8f55274d779


さて、liアイテムで使用するだけで説明を追加しようとしましたが、まったく機能しませんでした!

<div class="header">
     <div class="container">
           <div id="logo"><a href="#"><img src="img/logo.png"/></a></div>
                <div class="menu">
                <ul>
                <li>Home<br /> Main Page</li>
                <li>Home<br /> Main Page</li>
                <li>Home<br /> Main Page</li>
                <li>Home<br /> Main Page</li>
                <li>Home<br /> Main Page</li>
                </ul>
            </div>
     </div>
</div>

それが私が使用したCSSです：

.header {
background: #6b6353 url("../img/header.png");
width: 100%;
height: 112px;
}

#logo {
float: left;
margin-top:22px;
}

.subheader {
background: #deac12 url("../img/subheader.png");
width: 100%;
height: 36px;
}

.menu ul li{
display: inline;
}

インライン＆ブレイクがあるのに動かないのはなぜ？

そのコードで何が起こるか：

http://gyazo.com/a585ed4b408f3c6ed2583244ea4ff236

ありがとうございました！

4

3 に答える 3

2

タグの使用display: inline-blockをやめて、代わりにaまたは aを使用してください。<br><span><p>

于 2012-10-01T20:06:55.647 に答える
0 
.menu ul li{
    float: left;    
}​

あなたの問題を解決します。改行を取得しますが、2 番目liは 2 番目の改行の直後に開始されます (2 番目の li の 1 行目は、1 番目の li の 2 行目の隣に開始されます)。

[Home
Main Page][Home
Main Page][Home
Main Page]...
于 2012-10-01T20:07:12.933 に答える
0

使ってみて

.menu ul li{
list-style: none;
float: left;
}

削除display: inline;すると、リストのスタイルが表示されます。これが理由list-style: none;であり、float: left;はすべて<li>を同じ行に配置します。

于 2012-10-01T20:08:33.010 に答える