Question

我已经查看并尝试了网站上的一些现有解决方案（例如CSS Problem to make 2 divs float side by side和CSS layout - Aligning two divs side by side），但这些解决方案都不适用于我。

我对CSS有点新意，但我试图以与http://photography.stuartbrown.name/类似的方式在我的WordPress网站http://www.kantryla.net/上对齐标题和菜单。每当我浮动时：在菜单区域右边，菜单消失在图像下方，浮动：在菜单上左侧将图像推向右边。

我知道为了实现我想要的东西，我需要减少网站标题的大小并减少菜单的宽度（可能通过减少列表中项目之间的差距？），但我＆＃39 ;我非常欣赏有关如何实现kantryla的标题和菜单布局的一些建议。

您可能会注意到我编辑了主题的PHP以包含DIV

<div class="stuart_menu">

围绕着标题和菜单，认为这会使封闭的项目更容易控制。确定是否正确但我可以在必要时轻松删除。

感谢您的帮助！

Answer 1

将这些样式放在CSS中

#logo {
    float: left;
    margin: 0 0 25px;
    position: relative;
    width: 20%;
}

#logo h1 {
    color: #555555;
    display: inline-block;
    font-family: "Terminal Dosis",Arial,Helvetica,Geneva,sans-serif;
    font-size: 25px;
    font-weight: 200;
    margin-bottom: 0.2em;
}

#menu {
   float: left;
   width: 80%;
}

.stuart_menu {
  overflow:auto;
}

我猜是的。

Answer 2

菜单有点混乱，我对所有（不需要的）元素，类都没有任何意义。

但基本上你是在正确的方式，你需要重新调整两个主要元素（徽标和菜单）的大小，以便它适合父div。

例如，像这样：

HTML

<div class="stuart_menu">
    <div class="logo">logo</div>
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Photos</a></li>
        <li><a href="#">Delicious</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Google+</a></li>
        <li><a href="#">FOAF Description</a></li>
    </ul>
</div>

CSS：

.stuart_menu {
    width: 600px;
}
.logo {
    width: 150px;
    background: red;
    float: left;
}
.nav {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    float: left;
}
.nav li {
    display: inline-block;

}

同时检查此demo。

您可以选择是否要对齐徽标旁边的菜单（使用float: left）或将其对齐到父级的右侧（将浮动更改为右侧）。

Answer 3

您可以尝试的任何类型的解决方案都可能导致修改外观和感觉你的网站。

也许你可以尝试通过减少元素的宽度并使其浮动在左边来实现这一点。

顺便说一句，这会搞乱网站的整个设计，因为“菜单”部分被插入主容器元素中。所以我宁愿把这两个部分分开。

我要做的是：

#logo{ width:60%;float:left;}
nav {width:35%;float:left;}

减少nav li元素之间的差距，可以减少填充并使其更易于识别，添加右边框

#menu ul li{margin:22px 15px; border-right:1px solid #ccc;}

希望这有效

Answer 4

只需将#logo更改为包含float: left;，即可在菜单中添加徽标。这将是它的权利。这只是一个问题，然后缩小标识和菜单的大小，以适应容器。另外一个答案也应该有效。

并排放置两个DIV，浮动：向左或向右

4 个答案: