Need help in removing unncessary space between td and ul - html, css_问答_开发者

Need help in removing unncessary space between td and ul - html, css

开发者 https://www.devze.com 2023-01-28 19:05 出处：网络

I am unable to remove some spaces between a td and ul. Below is the piece of code <html> <head>

相关专题：css

I am unable to remove some spaces between a td and ul.

Below is the piece of code

<html>
<head>
<link href="gs.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<table width="100%">
<tr>
<td width="100%" class="posMenuLevel1" style="border :1px solid gray;">
<br />
<ul class="menuLevel1">
<li>
<a href="" >ABCD</a>
</li>
<li>
<a href="" >EFGH</a>
</li>
<li>
<a href="" >IJKL</a>
</li>
<li>
<a href="" >MNOP</a>
</li>
开发者_StackOverflow社区</ul>
<br />
</td>
</tr>
</table>
</body>
</html>

gs.css

.posMenuLevel1
{
text-align: left;
vertical-align: top;
}

.menuLevel1 li
{
display: inline;
list-style-type: none;
}

.menuLevel1 li a
{
padding: 5px;
text-decoration: none;
background-color: #EE7600;
color: #000000;
}

.menuLevel1 li a:visited
{
color: #000000;
}

.menuLevel1 li a:hover
{
text-decoration: underline;
}

On running this, you would notice that there is a space on the left, just before the menu/links start.

If I do a right align, the spaces do not appear.

Not sure on why the spaces appear while aligning them to the left

Any help would be appreciated. Thanks

The ul has margin/padding by default to provide the indent for list items. You need to reset that:

.menuLevel1 {margin: 0; padding: 0;}

In fact you should also consider reseting default css rules by using, for example, Eric Meyer's approach: http://meyerweb.com/eric/tools/css/reset/.

This can solve a lot of similar problems, especially cross-browser ones.

try table {border-collapse: collapse;} & ul {margin:0; padding:0;}