横向导航栏制作li标签不换行

方法1：使用浮动，并在最后一个li后面清除浮动

//css样式  li{float:left} div.clear{clear:both}
    <ul>
        <li>土豆<li/>
        <li>马铃薯<li/>
        <li>地瓜<li/>
        <div class="clear"><div/>
    <ul/>
<nav/>

方法2：设置ul足够的宽度

//css样式  li{float:left} ul{width:1000px} ul的宽度可根据li的宽度乘以个数去动态计算
<nav>
    <ul>
        <li>土豆<li/>
        <li>马铃薯<li/>
        <li>地瓜<li/>
    <ul/>
<nav/>

方法3：不使用浮动，设置li的样式为display:inline-block；white-space:nowrap;  值得注意的是此时li标签之间会有间距(之前看到教程这叫做空白折叠现象)，可以使用margin-right:-8px或者把代码中的li元素之间拼成一行。

//css样式  li{display:inline-block;white-space:nowrap} 
<nav>
    <ul>
        <li>土豆<li/>
        <li>马铃薯<li/>
        <li>地瓜<li/>
    <ul/>
<nav/>