Question

我需要在同一行显示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;}

Answer 1

更改.MainMenu

的宽度

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

工作示例： http://jsfiddle.net/qY642/1/

Answer 2

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

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

Answer 3

如果您希望div位于同一行，则需要将float:left设置为第一个div，将float:right设置为第二个div。

试试这个：

.MainMenuBasket{float: right; margin-top:25px;}

Answer 4

移除width并将display:table-cell添加到.MainMenu并从float:left移除.MainMenuBasket

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

<强> DEMO

Answer 5

这是你需要的吗？

<强> 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>

如何在同一行显示带有p标签的两个div

5 个答案: