边框底部,包装文本

时间:2012-10-21 18:12:12

标签: html css border wrapping

我在css中包装有问题。我需要使用单词'somewordhere'来启动红色边框底部。此处不允许使用span / other html方法的解决方案,因为文本是从CMS生成的...我需要的 - > http://i.imgur.com/JWd1X.png

第二行Intouchables没问题

由于

http://jsfiddle.net/XGRwy/384/

ul { text-align:center; padding: 10px; border: 2px solid green}
li { margin: 10px 0 10px; display: inline-block; border-bottom: 2px solid red;}
li a {text-decoration:none; border-left: 2px solid orange; }

<ul style="width: 150px">
   <li>
      <a href="http://some">BEGIN........END somewordhere</a>
   </li>
   <li>
      <a href="http://some">Intouchables</a>
   </li>    
</ul>

1 个答案:

答案 0 :(得分:0)

我离开了Fabricio提出的图像,你说它应该是什么样子。

我删除了左边框调用并将其放在'li'上,然后我将'li'的宽度设置为100%。

ul { text-align:center; padding: 10px; border: 2px solid green; width: 150px; }
li { width: 100%; margin: 10px 0 10px; border-bottom: 2px solid red; border-left: 2px solid brown;}
li a {text-decoration:none;  }

以下是jsFiddle工作示例。