How do I indent an unordered list properly? margin-left won't work!
Hi I'm creating an email but I'm not sure how to adjust the automated indent on the bullets. I'm sure theres a simple fix. Margin-left doesn't seem to work!
Thanks for your help Regards Judi
.bullets{
width:255px;
color:white;
font-size:11px;
margin-right: 2em;
list-style: none;
line-height:15px;
list-style: none;
margin-left: 0;
padding-left: 1em;
d开发者_Go百科isplay:inline;
}
<table class="bullets" border="0">
<tr>
<td><ul>
<li> Select products
</li>
</ul></td>
</tr>
<tr>
<td>
<ul>
<li> Incorporate </li>
</ul></td>
</tr>
<tr>
<td><ul>
<li> on site</li>
</ul></td>
</tr>
</table></td>
Less is more:
<ul>
<li>Abc</li>
<li>Def
<ul>
<li>Ghi</li>
<li>Jkl</li>
</ul>
</li>
<li>Mno</li>
</ul>
You need to apply the margin-left: 0;
to the li
itself.
.bullets li {
margin-left: 0;
padding-left: 0;
}
You might find you also need to apply it to the ul
aswell.
.bullets ul, .bullets li {
margin-left: 0;
padding-left: 0;
}
Check also that that table
and td
do not have any padding or margin applied to them.
.bullets, .bullets td, .bullets ul, .bullets li {
margin-left: 0;
padding-left: 0;
}
Hope this helps.
.bullets{
width:255px;
color:white;
font-size:11px;
margin-right: 2em;
list-style: none;
line-height:15px;
list-style: none;
margin-left: 0;
padding-left: 1em;
display:inline;
}
<table class="bullets" border="0">
<tr>
<td>
<ul>
<li> Select products</li>
<li> Incorporate </li>
<li> on site</li>
</ul>
</td>
</tr>
</table>
The Bullet indent should be controlled by margin-left.
精彩评论