CSS内联不起作用

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，所以默认情况下它显示为block。 尝试这个：

#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内联不起作用

问题描述

5 个解决方案

解决方案1
0 2014-01-16 17:52:28

解决方案2
0 已采纳 2014-01-16 17:53:26

解决方案3
0 2014-01-16 17:54:12

解决方案4
0 2014-01-16 17:56:20

解决方案5
0 2014-01-16 17:58:58

CSS内联不起作用

问题描述

5 个解决方案

解决方案1 0 2014-01-16 17:52:28

解决方案2 0 已采纳 2014-01-16 17:53:26

解决方案3 0 2014-01-16 17:54:12

解决方案4 0 2014-01-16 17:56:20

解决方案5 0 2014-01-16 17:58:58

解决方案1
0 2014-01-16 17:52:28

解决方案2
0 已采纳 2014-01-16 17:53:26

解决方案3
0 2014-01-16 17:54:12

解决方案4
0 2014-01-16 17:56:20

解决方案5
0 2014-01-16 17:58:58