Question

我有一个风格和一个索引。我想在同一行显示徽标和文本，但我不能。它显示在不同的行中。

以下是代码：

的index.php

<body>

<div id="headerbar">
    Hello World
</div>

<div id="mainmenu-bar">
    <div id="mainmenu-content">
        <img src="http://www.conceptcupboard.com/resource-centre/wp-content/uploads/2013/04/recycle-logo.gif" height="75" width="75" style="margin-top:5px;">
        <h1>Text that I don't see, because is down</h1>


    </div>

</div>

<div id="content">
    <h1 color="white">Hello World</h1>
</div>

</body>

和layout.css

@font-face{font-family: Maven Pro; src: url(../fonts/MavenPro-Regular.ttf);}

body{font-family:Maven Pro; background:#ECECEC; border:0; font-size:100%; vertical-align:baseline; margin:0; padding:0;}

#headerbar{height:30px; float:right; margin-right:20px; margin-top:5px;}
#mainmenu-bar{background:#4C84BC; width:100%; height:90px; overflow: hidden;}
#mainmenu-content{margin: 0 auto; width:1000px;}

您可以在此处进行测试：http://jsfiddle.net/6WYk4/

Answer 1

<h1>是块级元素。请改用span：）

Answer 2

因为您没有内联阻止h1，默认情况下它显示为块。试试这个：

#mainmenu-bar h1{ 
    display:inline-block;
}

垂直对齐的完整示例：

http://jsfiddle.net/6WYk4/3/

Answer 3

它们不是并排的原因是因为它们是块级元素。你需要添加一个浮动。

另外，内联样式是坏习惯。

<img src="http://www.conceptcupboard.com/resource-centre/wp-content/uploads/2013/04/recycle-logo.gif" class="derp" />

<style type="text/css">
    .derp {
        height:75px;
        width:75px;
        margin-top:5px;
        float:left;
    }
</style>

Answer 4

试试这个小提琴：http://jsfiddle.net/WurrZ/

#mainmenu-content img {float:left;}
#mainmenu-content h1 {float:left; width:600px;}
#content {clear:both;}

图像和h1需要浮动，内容需要清除。

Answer 5

将float:left;添加到img的css

Css Inline不起作用

5 个答案: