html - HTML/CSS - 如何使文本溢出彼此一致？

Question

我有一个垂直菜单和一些溢出的文本，我想让文本彼此内联。我该怎么做？

例如：

http://i754.photobucket.com/albums/xx182/rache_R/text_zpsbd15aa0d.png

HTML：

    <div id="sideMenu">
    <ul class="top-level">
        <li><a href="#">Back</a></li>
        <li><a href="#">Accessories & Merchandise</a></li>
        <li><a href="#">Accident & Roadside Assistance</a></li>
        <li><a href="#">Customer Relations</a></li>
        <li><a href="#">E10 Petrol Compatibility</a></li>
        <li><a href="#">Insurance</a></li>
        <li><a href="#">Quality & Safety Actions</a></li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Servicing & Maintenance</a></li>
        <li><a href="#">Servicing Offers</a></li>
        <li><a href="#">Warranty</a></li>
    </ul>

</div>

CSS：

#sideMenu {
font-size: 11px;
width: 185px;
padding-top: 35px;
padding-left: 15px;
}

#sideMenu ul {
margin: 0;
padding: 0;
}

#sideMenu li {
list-style: none;
padding: 9px;
padding-left: 25px;
}

ul.top-level {
background: #eceeef;
}

ul.top-level li {
border-bottom: 1px solid #FFF;
border-top: 1px solid #FFF;
}

#sideMenu a {
color: #000;
curser: pointer;
display: block;
height: auto;
text-indent: 10px;
text-decoration: none;
width: 100%;
background-image: url(leftMenuArrowBlack.gif);
background-repeat: no-repeat;
background-position: left;
padding-left: 0px;
}

#sideMenu a:hover {

}

#sideMenu li:hover {
background: #fac026;
position: relative;
}

Answer 1

您可以在 CSS 中指定 text-align:left/right/center 以对齐垂直菜单中的文本

更新

您可以删除 li 项目上的 text-indent 和 padding-left 并添加 text-align:left

#sideMenu a {
color: #000;
curser: pointer;
display: block;
height: auto;
text-align: left;
text-decoration: none;
width: 100%;
background-image: url(leftMenuArrowBlack.gif);
background-repeat: no-repeat;
background-position: left;
padding-left: 0px;
}

签出 jsfiddle http://jsfiddle.net/8U2H5/1/

Answer 2

这是你想要的吗..

然后为#slidemenu 设置宽度 200px ..