CSS - 如何设置一些内联div

Question

嗨我试图设置一些div内联，我不知道还能做什么。

.menuboton{
display:inline;
padding:0.7em;  
border-radius: 4px;
background-color: #093;

}


 .menu{
    display:inline;
    margin-right:4em;
    } 

有两个类，第一个是4个div，另一个是一个div，里面有<img>。那些div在另一个div里面：

#elmenu{
    margin:auto;
    margin-bottom:10px;
    width:100%;

    border-top:1px solid black;
    border-bottom:1px solid black;

} 

这是我的问题：4个div总是略低于<img>里面的那个，并越过容器div（elmenu）。为了解决这个问题，我尝试将其设置为display:inline-block并解决了容器限制的问题，但仍然低于内部<img>的问题。

这里是html代码：

<div id="elmenu">
<div class="menu" id="logo"><img id="imglogo" src="psds/logo.png" /></div>
<div class="menuboton"><a href="index.php">Inicio</a></div>
<div class="menuboton"><a href="Posts.php">Posts</a></div>
<div class="menuboton"><a href="login.php">Login</a></div>
<div class="menuboton"><a href="usuarios/actividadUsuario.php">Usuario</a></div>

</div>

照片管理： 使用display:inline;

使用display:inline-block;

我希望所有的div都保持在同一水平！ 有人猜？

Answer 1

将Knowit图像放在左侧，将菜单放在右侧，然后相应地编辑宽度。

HTML：

<div class='container'> 
<div class='left'></div> 
<div class='right'></div> 
</div>

CSS：

.container { overflow: hidden; margin:0; padding:0; }
.left{ float: left; width: 150px; }
.right { float: right; width: 150px; text-align:left; }

在OP请求上编辑：

要在div类中使用对象：

text-align:center;

居中对齐div容器使用：

margin: 0 auto;

所有这些信息都可以在http://w3schools.com/

找到

Answer 2

您应该尝试使用span代替div。还可以使用float:left

Answer 3

就像我的评论一样，Css应该喜欢这个

.menuboton{
        float: left;
        padding:0.7em;  
        border-radius: 4px;
        background-color: #093;
    }



.menu{
    float: left;
    margin-right:4em;
} 

<强>更新

HTML：

<div id="elmenu">
    <div class="menu" id="logo"><img id="imglogo" src="http://www.winphoneviet.com/forum/data/avatars/l/35/35914.jpg?1370081753" /></div>
    <div class="menuboton"><a href="index.php">Inicio</a></div>
    <div class="menuboton"><a href="Posts.php">Posts</a></div>
    <div class="menuboton"><a href="login.php">Login</a></div>
    <div class="menuboton"><a href="usuarios/actividadUsuario.php">Usuario</a></div>
    <div style="clear: both;"></div>
</div>

这是Fiddle

Answer 4

vertical-align: middle上的{p> #elmenu应该在徽标和菜单项上与display: inline-block;一起使用。

Answer 5

首先，您应该从列表或导航标记构建菜单。

内联块是一个好主意，您可以轻松地调整元素的大小和对齐。

要构建您需要的菜单：

1. inline-boxes
2. 文本对齐：中心
3. 行高
4. float（只需一次）

第一个元素（例如持有徽标）可以向左浮动 将导航栏的行高设置为行高（min-）。

我们来到这里：http://jsfiddle.net/GCyrillus/CaR7a/


.menuboton {
    display:inline-block;
    padding:0.7em;
    border-radius: 4px;
    background-color: #093;
    line-height:1.2em;
}
.menu {
    float: left;/* logo */
}
#elmenu {
    padding:0;
    margin:0;
    list-style-type:none;
    line-height:48px;/* logo's height */
    text-align:center;
    border-top:1px solid black;
    border-bottom:1px solid black;
}

a {
    color:white;
    text-decoration:none;
}

<ul id="elmenu">
    <li class="menu" id="logo"><img id="imglogo" src="http://placehold.it/1&1" /></li>
    <li class="menuboton"><a href="index.php">Inicio</a></li>
    <li class="menuboton"><a href="Posts.php">Posts</a></li>
    <li class="menuboton"><a href="login.php">Login</a></li>
    <li class="menuboton"><a href="usuarios/actividadUsuario.php">Usuario</a></li>
</ul>

我希望它有用