html - 将文本与列表项对齐到同一行

Question

这是我的代码:

* {
    padding:0px;
    margin:0px;
}

a {text-decoration:none;}

html,body {height: 100%;}
header {
    background:#CCEAF9;
background-image:url('http://wallpoper.com/images/00/45/05/47/green-background-2_00450547.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
}
#featurenav {
    background:#000;
    color:#FFF;
    height:50px;
    transition:0.3s;
}
#featurenav span {
    display:inline-block;
    font-weight:bold;
    margin-right:1em;
    opacity:.5;
}
#featurenav span.active {
    opacity:1;
}
#featurenav.fixed {
    position:fixed;
    width:100%;
    top:0;
    opacity: 0.9;
}
.fixed + #navPlaceholder {
    height:50px;
}
section {
    height:600px;
    background:#EEE;
    background: linear-gradient(to bottom, #DDD 0%, #FFF 100%);
    padding:1em;
}
.full_height { height: 100%; }
.mid_height { height: 350px; }
.container {
    width: 780px;
    margin:0px auto;
}

#blackOverlay{background-color:#000;opacity:0.0;position:absolute;top:0;width:100%;height:100%;}

ul li{
  display: inline;
}
li {
    list-style-type: none;
}

#nav {padding-top: 30px;}
#nav ul {
    float: right;
}

#nav ul li a {
-webkit-font-smoothing: antialiased;
color: rgb(255, 255, 255);
   opacity: .7;
    transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -webkit-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
font-family: proxima-nova, 'Proxima Nova', 'Helvetica Neue', sans-serif;
font-size: 13px;
font-weight: bold;
letter-spacing: 1px;
line-height: 35px;
padding-left: 10px;
padding-right: 10px;
text-transform: uppercase;
}

#nav ul li a:hover {
opacity: 1;
}

#nav ul li .active {
opacity: 1;
}

#nav img {
    float:left;
}

footer ul {
    float: right;
}

http://jsfiddle.net/h5am3/embedded/result/

如何让右边的列表与右边的文字在同一行？我正在使用 float: right; 但这似乎不起作用。

Answer 1

最简单的答案是添加:

.container p{
    float:left;
}

Demo Fiddle

默认情况下，您使用的 p 是 block 级 100% 宽度，因此占用了视口(viewport)的宽度，迫使列表在向右浮动之前放置在下一行。

另一种选择是设置:

.container p {
    display:inline-block;
}

确保 p 符合“内联”布局