0

同じ行に 2 つの div を表示する必要がありますが、どちらにも p タグがあり、そのうちの 1 つには画像が必要なので、それらを取り除くことができないため、問題の回避策が必要です よろしくお願いします ;)

以下のコードを参照してください。

HTML

<div class="MainMenu">
        <a href="home.php"><p>HOME</p></a>
        <a href="#"><p>ABOUT</p></a>
        <a href="store.php"><p>STORE</p></a>        
    </div>

    <div class="MainMenuBasket">
        <img src="../Images/jigsoar-icons/PNG/light/64px/64_cart.png" width="px" height="px" />

        <a href="#"><p>BASKET</p></a>
    </div>

CSS

.MainMenu{width: 680px; float: left; margin-top:25px;}
.MainMenu a{text-decoration: none; color: #FFF; }
.MainMenu a:link {color: #FFF; text-decoration: none;}
.MainMenu a:active {color: #; text-decoration: none;}
.MainMenu a:hover {background-color: #7D3B05; text-decoration: none;}
.MainMenu a:visited {color: #; text-decoration: none;}
.MainMenu p{display: inline; font-size: 18px; padding-left: 20px;}

.MainMenuBasket{float: left; margin-top:25px;}
.MainMenuBasket a{text-decoration:none; color: #FFF;}
.MainMenuBasket a:link {color: #FFF; text-decoration: none;}
.MainMenuBasket a:active {text-decoration: none;}
.MainMenuBasket a:hover {background-color: #7D3B05; text-decoration: none;}
.MainMenuBasket a:visited {text-decoration: none;}
.MainMenuBasket p {display: inline; font-size: 18px;  padding left: 20px;}
4

5 に答える 5

3

の幅を変更します.MainMenu

.MainMenu {
    float: left;
    margin-top: 25px;
    width: 250px;
}

作業例: http://jsfiddle.net/qY642/1/

于 2013-03-19T09:26:05.793 に答える
0

これは必要ですか？

CSS

.MainMenu{width: 680px; float: left; margin-top:25px; background:violet;float:left; width:300px;}
.MainMenu a{text-decoration: none; color: #FFF;display: inline; font-size: 18px; padding-left: 20px; }
.MainMenu a:link {color: #FFF; text-decoration: none;}
.MainMenu a:active {color: #; text-decoration: none;}
.MainMenu a:hover {background-color: #7D3B05; text-decoration: none;}
.MainMenu a:visited {color: #; text-decoration: none;}
.MainMenuBasket{float: left; margin-top:25px; background:maroon}
.MainMenuBasket a{text-decoration:none; color: #FFF;display: inline; font-size: 18px;  padding left: 20px;}
.MainMenuBasket a:link {color: #FFF; text-decoration: none;}
.MainMenuBasket a:active {text-decoration: none;}
.MainMenuBasket a:hover {background-color: #7D3B05; text-decoration: none;}
.MainMenuBasket a:visited {text-decoration: none;}

HTML

<div class="MainMenu">
    <a href="home.php">HOME</a>
    <a href="#">ABOUT</a>
    <a href="store.php">STORE</a>        
</div>

<div class="MainMenuBasket">
    <img src="../Images/jigsoar-icons/PNG/light/64px/64_cart.png" width="px" height="px" />
    <a href="#">BASKET</a>
</div>
于 2013-03-19T09:32:18.283 に答える
0

属性「position:absolute」と「float:right」を .MainMenuBasket に追加します。このクラスの属性「左」で遊んでみましょう。右に正しく配置する必要があります。

今後は、CSS ライブラリのブートストラップhttp://twitter.github.com/bootstrap/を使用してみてください。そのような div を作成するのは非常に簡単です。

于 2013-03-19T09:26:08.860 に答える
0

両方を同じ行に配置する場合は、最初の div と2 番目の divdivに設定する必要があります。float:leftfloat:right

これを試して ：

.MainMenuBasket{float: right; margin-top:25px;}
于 2013-03-19T09:28:49.163 に答える
0

削除およびwidth追加およびdisplay:table-cell削除.MainMenufloat:left.MainMenuBasket

.MainMenu{display:table-cell; margin-top:25px; background:violet}

デモ

于 2013-03-19T09:29:03.923 に答える