Question

我正在改变网站上的顶级菜单栏，当我在菜单中添加了一些新项目时 - 在{css后面有一块带有颜色块的<ul>，它们都聚集在一起。现在对于编码来说是全新的，我想我可以在中间插入一个br标签，在下面的一条线上划分标签然后把东西放好，但是这两行菜单项之间留下了很大的差距......

我如何设计这个 - 非常简单，以便我添加的任何新菜单标签都可以整齐地放在下一行，间距很大......？感谢。

#SUBMENU { float:left; text-align:left;}


#SUBMENU ul { list-style-type:none; margin:0; padding:0;     text-align:center;}

#SUBMENU ul li { display: block; }

#SUBMENU ul li a.SUBSMAL { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #fff; background-color:#d21818;  width:100%; display:block; }

#SUBMENU ul li a.SUBS1 { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #fff; background-color:#d21818;  width:100%; display:block; }
#SUBMENU ul li a.SUBS2 { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #fff; background-color:#185cb0; width:100%;  display:block; }
#SUBMENU ul li a.SUBS3 { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #fff; background-color:#4b0082;  width:100%;  display:block; }
#SUBMENU ul li a.SUBS4 { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #000; background-color:#e9dc11;  width:100%;  display:block; }
#SUBMENU ul li a.SUBS5 { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #fff; background-color:#06a01f;  width:100%;  display:block; }

#SUBMENU ul li a.SUBS6 { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #fff; background-color:#ff7e16; width:100%;  display:block; }
#SUBMENU ul li a.SUBS7 { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #000; background-color:#14f076;  width:100%;  display:block; }
#SUBMENU ul li a.SUBS8 { text-decoration: none; text-align:left; padding: .5em 1.5em; color: #fff; background-color:#f342e4;  width:100%;  display:block; }

<div id="SUBMENU" class="row" style="background-color: #000; margin-bottom: 0;">
<div class="column span-16">
<ul>
<li style="display: block;"><a class="SUBSMAL" href="http://http://www.liverpoolconfidential.co.uk/offers/liverpool-malmaison" target="_parent">Offers</a></li>
<li><a class="SUBS1" href="http://www.liverpoolconfidential.co.uk/offers/liverpool-malmaison/about-us" target="_parent">About Us</a></li>
<li><a class="SUBS1" href="http://www.liverpoolconfidential.co.uk/offers/liverpool-malmaison/menus" target="_parent">Menus</a></li>
<li><a class="SUBS1" href="http://www.liverpoolconfidential.co.uk/offers/liverpool-malmaison/location" target="_parent">Location</a></li>
<li><a class="SUBS4" href="http://www.liverpoolconfidential.co.uk/offers/liverpool-malmaison/what-you-say" target="_parent">What You Say</a></li>
<li><a class="SUBS5" https://wakelet.com/wake/4d597dc9-b689-4b88-b4ef-4652f22b746d" target="_parent">What they say</a></li>
<li><a class="SUBS5" https://wakelet.com/wake/58c96671-8669-4c1f-8965-c516af0f8c9d" target="_parent">What we say</a></li>
<li><a class="SUBS5" https://wakelet.com/wake/58c96671-8669-4c1f-8965-c516af0f8c9d" target="_parent">Christmas</a></li>
</ul>
</div>
</div>

Answer 1

从SUBS5

您忘记了 href 属性

使用此

<li><a class="SUBS5" href="https://wakelet.com/wake/58c96671-8669-4c1f-8965-c516af0f8c9d" target="_parent">What we say</a></li>

而不是

<li><a class="SUBS5" https://wakelet.com/wake/58c96671-8669-4c1f-8965-c516af0f8c9d" target="_parent">What we say</a></li>

如何包装这些菜单标签？

1 个答案: