0

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

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

}


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

有两个类，第一个是 4 个 div，另一个是一个带<img>内部的 div。这些 div 在另一个 div 中：

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

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

}

这是我的问题：4 个 div 总是略低于<img>内部的 div 并越过容器 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; 使用 <code>display:inline;</code>

使用display:inline-block;

使用 <code>display:inline-block;</code>

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

4

5 回答 5

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/上找到

于 2013-06-05T02:16:45.777 回答
0

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

Inline-block 是一个好主意，您可以轻松地调整元素的大小和对齐方式。

要构建您的菜单，您需要：

  1. 内联框
  2. 文本对齐：居中。
  3. 线高
  4. 浮动（仅一次）

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

我们来到这里：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>

我希望它有用

于 2013-06-05T03:12:19.513 回答
0

就像我的评论一样，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>

这是小提琴

于 2013-06-05T02:19:07.727 回答
0

vertical-align: middleon#elmenu应该与display: inline-block;徽标和菜单项一起使用。

于 2013-06-05T02:22:12.667 回答
0

您应该尝试使用span而不是div. 也使用float:left

于 2013-06-05T02:15:39.693 回答