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;
}

- user2656943

---

请发布您的HTML和CSS代码。 - Jukka K. Korpela

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/

- Abhidev

---

不幸的是，在CSS中指定text-align对溢出内容的对齐没有任何影响。 - user2656943

Answer 2

这是你想要的吗？

那么请将 #slidemenu 的宽度设为 200px。

- Sasidharan

---

我希望宽度保持在185像素，但是当文本溢出时，我希望底部的文本与顶部的文本缩进相同。例如，在段落中，当您开始新的句子时，文本始终彼此对齐。 - user2656943

是的，我希望第二行从与第一行相同的位置开始。 - user2656943

是的，我希望第二行与第一行在同一位置开始。 - user2656943

只需从“#sideMenu a”中删除文本缩进属性...然后，如果您的宽度为150px，则仍将保持不变..很酷。 - Sasidharan