我正在尝试在用作副标题的段落旁边创建一个无序列表,但是该列表被压缩成一个项目的大小,然后项目彼此堆叠。
我还希望它们在同一级别上并排,但都分别与标题元素的左侧和右侧对齐。
这是我到目前为止所得到的。您可以看到堆叠列表以及将它们并排放置的尝试,但我相信有更好的方法来做到这一点。
这就是我尝试将字幕和列表放在同一级别上的内容(另请查看 jsfiddle):
.subtitle {
..
margin-top: -40px;
..
}
谢谢。
你不应该只浮动li
. 您必须内联并向右p
浮动http://jsfiddle.net/Zz6Xs/12/nav
nav {
float: right;
}
.subtitle {
display: inline;
...
nav ul {
margin-top: 0;
}
大多数 HTML 元素都有默认的填充和边距设置,它们因浏览器而异。许多人使用CSS 重置系统来获得跨浏览器的一致外观。请参阅此示例,就像您所拥有的一样,但必须自己重置边距
如果可以使用 HTML 5,则比使用浮点数更好的是flex box 模型nav
。在下面的示例中,我们告诉占用所有剩余空间,而p
只需要它的宽度
CSS
section {
display: box;
box-orient: horizontal;
}
nav {
box-flex: 1;
text-align: end;
}
HTML
<section>
<p class="subtitle">Subtitle </p>
<nav><ul>
<li class="menu">Item 1</li>
<li class="menu">Item 2</li>
<li class="menu">Itemmm</li>
</ul></nav>
</section>
还可以尝试删除负边距并将元素上的填充和边距归零。
header {
width: 50% ;
margin:0 auto;
}
h1 {
font-size: 50px;
color: #33B5E5;
}
h1,p,nav,ul{
padding:0;
margin:0;
}
.subtitle {
color: #33B5E5;
float:left;
width:20px
}
ul{
float:right;
}
.menu {
display: inline;
width: 20%;
}