我的html页面中有一个导航栏和一篇文章。我希望导航栏浮动在页面的左侧，文章放在右侧：但我不希望文章环绕导航。
<nav>
<ul>
<li id="startButton" class="ui-selected"><div>Inicio</div></li>
<li id="servicesButton"><div>Servicios</div></li>
<li id="offersButton"><div>Ofertas</div></li>
<li id="contactButton"><div>Contacto</div></li>
</ul>
</nav>
<article id="start">
<p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.</p>
<p>Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas. Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.</p>
<p>Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas. Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.</p>
<p>Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas. Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden,</p>
</article>
我的代码就在这个小提琴中：http://jsfiddle.net/qu6jqcrk/
我试过浮动文章，但它被推下导航栏。任何人都可以帮我搞清楚吗？
此致
答案 0 :(得分：4)
有一些解决方案。一种是使用display: table-cell到article：
nav {
float: left;
}
nav ul {
list-style-type: none;
position: relative;
left: -20px;
display: inline-block;
text-align: center;
}
nav ul li {
border: 2px solid #051838;
margin: 10px;
padding: 1em;
font-size: 1em;
height: 16px;
font-family: Lucida Console;
cursor: pointer;
}
article {
padding: 10px 20px 10px 10px;
margin: 10px;
display: table-cell;
}
article p {
text-align: justify;
}<nav>
<ul>
<li id="startButton" class="ui-selected">
<div>Inicio</div>
</li>
<li id="servicesButton">
<div>Servicios</div>
</li>
<li id="offersButton">
<div>Ofertas</div>
</li>
<li id="contactButton">
<div>Contacto</div>
</li>
</ul>
</nav>
<article id="start">
<p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han
de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.</p>
<p>Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas. Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más
que otro.</p>
<p>Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está
ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas. Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro
si no hace más que otro.</p>
<p>Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está
ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas. Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro
si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado
mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden,</p>
</article>
答案 1 :(得分：2)
使用white-space:nowrap;
article {
padding: 10px 20px 10px 10px;
margin: 10px;
display: block;
white-space:nowrap;
}
答案 2 :(得分：2)
只需给文章一个宽度，将其浮动到右边，并使用nowrap
article {
padding: 10px 20px 10px 10px;
margin: 10px;
display: block;
width: 60%; /* You need to define a width */
float: right
white-space:nowrap;
}
注意：宽度非常重要，因此文章宽度不会过度增长。
答案 3 :(得分：2)
你可以用div包装：
<div class="Left">
<nav>
...
</nav>
</div>
<div class="Right">
<article id="start">
...
</article>
</div>
.Right {
float: right;
width: 70%;
}
.Left {
float: left;
width: 30%;
}
答案 4 :(得分：2)
使用display：table-cell for article
article {
padding: 10px 20px 10px 10px;
margin: 10px;
display: table-cell;
}