我如何包装这些菜单标签?

I was altering a top menu bar on a website, and when I added some new items to the menu - a <ul> with blocks of colour behind in css, they all bunched up towards the end. Now being completely new to coding, I figured I could just throw in a br tag in the middle to shunt the tabs after onto a line below and neaten things up, but that left a massive gap between the two rows of menu items....

我在一个网站上修改了一个*的菜单栏，当我在菜单上添加了一些新项目时——一个在css后面加了块颜色块的

How can I style this - VERY simply, so that any new menu tabs I add simply fall neatly onto the next line, nicely spaced....? Thanks.

我如何风格——非常简单,因此,任何新的菜单选项卡添加简单整齐坠入下一行,很好地间隔....吗?谢谢。

#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>

1 个解决方案

#1

from SUBS5 you forgot the href property

从SUBS5中你忘记了href属性

Use this

使用这个

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

Instead of

而不是

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

#1