0

我需要在同一行显示 2 个 div，但它们都有 p 标签，其中一个有图像，我需要它，所以我无法摆脱它们，所以我需要解决问题的方法提前谢谢;)

见下面的代码：

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

将属性“position:absolute”和“float:right”添加到 .MainMenuBasket。现在玩这个类的属性“left”。它应该在右侧正确对齐。

将来尝试使用 CSS 库引导程序http://twitter.github.com/bootstrap/。用它很容易创建这样的 div。

于 2013-03-19T09:26:08.860 回答
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

如果您希望两者都div在同一行，则需要设置float:left第一个 div 和float:right第二个 div。

尝试这个 ：

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

删除、width添加display:table-cell和.MainMenu删除float:left.MainMenuBasket

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

演示

于 2013-03-19T09:29:03.923 回答