如何对齐测试元素旁边的流程元素？

我对前端开发相对比较陌生，所以在寻找组织水平菜单的最佳方式时会遇到一些问题，其中包含一个徽标和几个菜单选项。另外，我想用宽|来分隔水平菜单如何对齐测试元素旁边的流程元素？

不知道该怎么做。

这是我到目前为止有：

HTML：

<header> 
<img src="/images/logo.png" height="50px" id="front" /> 
<nav> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</nav>

CSS：

body { 
margin: 0; 
background-color: #FFFFFF; 
} 
header { 
background-color: #009000; 
height: 85px; 
position: relative; 
} 
#front { 
margin-left: 20px; 
margin-top: 20px; 
} 
ul li { 
display: inline; 
list-style-type: none; 
margin-right: 34px; 
}

来源

2012-11-28 KPO

http://jsfiddle.net/u327N/ – Vinit

这对我有效。每个列表元素（用选择器“ul li”获得）都有一个很薄的右边框，而不是使用管道字符。您还可以在每个列表项目之间添加<li> | </li>。

此外，我正在浮动li元素左侧，而不是显示他们内联。不知道你是否想要在标题内的导航。

HTML：

<header> 
    <img src="/images/logo.png" height="70px" id="front" /> 
    <nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li class="last"><a href="#">Contact</a></li> 
    </ul> 
    </nav> 
</header>

CSS：

body { 
    margin: 0; 
} 
header { 
    background-color: #009000; 
    height: auto; 
    position: relative; 
} 
#front { 
    margin-left: 20px; 
    margin-top: 20px; 
    float: left; 
} 
nav { 
    float: left; 
    margin-top: 30px; 
} 
ul { 
    margin: 0; 
    padding: 0; 
    float: left; 
} 
ul li { 
    list-style-type: none; 
    float: left; 
    border-right: 2px solid black; 
    padding-right: 5px; 
    padding-left: 5px; 
} 
ul li.last { 
    border-right: 0px; 
}

来源

2012-11-28 23:09:11 Sam

嗨，山姆。是的，我需要徽标旁边标题中的导航栏。也许距离徽标50px .. – KPO

Nav现在位于标题中。要将其从徽标移开，只需在样式表的nav {}部分添加“margin-left：50px”（或任何您想要的度量）即可。 – Sam

谢谢萨姆。这工作。另外我注意到，在标题中，你删除了我的高度，并使用自动。你的方式比我的好吗？只是想知道，因为我不知道哪个更好。再次感谢。 – KPO

使用display: inline-block;和float: left;。

另外，将float:left;放置在您的#front css部分中以获取标题内的导航。

来源

2012-11-28 22:54:38 lifetimes

谢谢，帮助我调整菜单，但我如何将菜单放在标题中？ – KPO

Place float：留在#front css位中。 – lifetimes

好吧，我尝试过，但是当我实现这个变化时，顶部的标题有一个空白..... – KPO

虽然我创造了这个与资料核实，而不是UL /李，这里是会得到你开始的CSS：

body { margin:0; background-color:#FFFFFF; } 
header { background-color:#009000; height:85px; position:relative; } 
header:after { content:''; display:block; clear:both; } 
header img { float:left; margin:20px 20px 0 20px; } 
header ul { list-style-type:none; } 
header ul li { float:left; margin-right:34px; border-left:1px solid #000000; padding-left:10px; } 
header ul li:first { border:none; padding:0; }

你会看到我做了不同的几件事：

1）我在标题中使用了清除修复系统，这样当你使用浮动功能时，它们将被清除，并且不必担心它们在标题之后。

2）我将图像左移，并在右侧添加了一些边距。

3）由于您使用的UL /李，你需要关闭子弹与list-style-type:none;

4）我飘来li元素，并给他们左侧的每个边界，但后来我删除了边界和填充在第一里。

你也可以通过使用display:inline-block;来实现这一点我觉得使用DIV将会是更干净的代码，但我不想改变你的html，而只是向你展示了如何用css实现这一点。

来源

2012-11-28 23:28:17 zeMinimalist

如何对齐测试元素旁边的流程元素？

回答

相关问题