Question

我正在尝试创建一个看起来像链接图像的菜单。（http://i.stack.imgur.com/BCiqJ.jpg）。我认为它会非常简单，但是我试图用CSS破解这些单词时遇到了问题。这是针对cms的，因此标记的重要性是：

<ul>
  <li></li>
  <li></li> etc...
</ul>

如果图像链接断开，我试图创建一个菜单，单词之间没有空格，中间的单词在中间突破以适应<ul>的宽度

如下：
的 HOME VID
EOS 的 MUSI
ç CALEND
AR 的 EVENT
小号 PHOTO
小号关于 ç
防尘带

我在这里使用手动输入的<br />换行标记来伪造它...有没有办法让CSS发生这种情况？

Answer 1

嗯，我知道你说你想使用一个无序的列表，但我想我已经找到了一个使用div和span的解决方案：

<style type="text/css">
    #navigation span:nth-child(even)
    {
        font-weight: bold;
    }
</style>
<div id="navigation" style="width: 76px; word-wrap: break-word">
    <span>HOME</span><span>VIDEOS</span>
    <span>MUSIC</span><span>CALENDAR</span><span>EVENTS</span>
    <span>PHOTOS</span><span>ABOUT</span><span>CONTACT</span>
</div>

我仅在Chrome中对此进行了测试，因此您的里程数会有所不同。没有任何东西是浏览器特定的，我不认为，所以这应该是一个可行的跨浏览器解决方案。

Answer 2

尝试在display: inline元素上设置<li>。

自动换行：关于李的破解词（列表项）？

2 个答案: