html - CSS 条形菜单

Question

我正在尝试解决用户界面的逻辑一段时间。您可以想象的全新，并且仍在深入研究 CSS 内容。

我正在尝试创建一个“条形”菜单，其中内部具有固定宽度，左侧带有徽标，右侧带有菜单项。这是一张图片来告诉你我的意思：

这是我走了多远： http: //cssdeck.com/labs/31sxhkiv

问题是：我不知道如何将菜单项放在栏的浮动中心部分的右侧。我尝试将它们浮动到右侧（顺序更改）并给它们一个绝对价值......他们都没有帮助。

我确定我错过了一点，所以想试一试！

Answer 1

#content{
    background-color: gray;
    height: 25px;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    position:relative;    /* ADD THIS LINE */
}
#menu{                    /* ADD THIS STYLES */
    position:absolute;
    right:0px;
    top:0px;
}

Answer 2

我真的不认为绝对定位是您想要的，因为以后添加新项目很痛苦。这是我的你的 cssdeck 的叉子。我认为这更接近你想要的，但你必须打那个电话。我的主要想法是制作您的菜单项inline-block，position:relative以便项目以正确的顺序和布局呈现。即使使用相对定位，您也可以使用margin.

编辑

我创建了一个新的分叉，我认为这次它挽救了我的工作。另外，我决定继续并离开float范式，因为这可能是您想要的更多。诀窍是设置#menu为向右浮动，而菜单项向左浮动。我没想过要添加它，但您可能需要添加一个新行来清除浮动行为：

#menu:after { clear:float; }

Answer 3

您可以使用 a ulwith liitemsdisplay: inline并将其绝对定位在相对定位的容器中。