0

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

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

我知道为了达到我想要的效果，我需要减小网站标题的大小并减小菜单的宽度（也许通过减少列表中项目之间的间隙？），但我真的很感激一些关于如何实现 kantryla 的标题和菜单布局的建议。

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

<div class="stuart_menu">

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

谢谢你的帮助！

4

4 回答 4

2

将这些样式放在你的 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;
}

我想就是这样。

于 2013-09-19T08:42:07.317 回答
0

您可以尝试的任何解决方案都可能导致修改您网站的外观。

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

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

我要做的是：

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

要减少 nav li 元素之间的间隙，您可以减少填充并使其更易于识别，添加一个border-right

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

希望这有效

于 2013-09-19T08:09:08.293 回答
0

只需将其更改#logo为包含float: left;应将菜单与徽标放在一起。它将在它的右侧。只需缩小徽标和菜单的大小以适应容器即可。其他答案也应该有效。

于 2013-09-19T08:09:16.297 回答
0

菜单有点乱，我无法理解所有（不需要的）元素和类。

但基本上你是在正确的方式，你需要减小两个主要元素（徽标和菜单）的大小，以便它适合父 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;

}

还要检查这个演示。

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

于 2013-09-19T07:55:10.377 回答