CODEWITHSUNDEEP
htmlcssalignmenthtml-listsspacing
OzzC
OzzC

Reputation: 821

Remove indentation from an unordered HTML list

div.content that is containing ul.searchlist with two lis (areas with the white background) is not aligning at the left completely as it has some extra spacing (area with the red background) and I don't know what is causing it to appear and how to remove it.

Illustration :

enter image description here HTML :

<div id="body-content">
   <h1>Title of</h1>
   <div class="content">
      <p style="margin:0;">Subtitle</p> 
      <ul class="searchlist">
         <li>
            <img src="" title="result" width="110px"/>
            <a href="#">This is a post for  testing CSS</a>
         </li>
         <li>
            <img src="" title="result" width="110px"/>
            <a href="#">This is a post for  testing CSS</a>
         </li>
      </ul>
   </div>
</div>

CSS :

#body-content{ float:left; width:700px;background:yellow; }
.content .searchlist{ float:left; width:700px; list-style:none; margin:15px 0 0 0; background:red; }
.content .searchlist li{ padding:10px; float:left; width:688px; background:#fcfcfc; margin-bottom:6px; }
.content .searchlist li img{ float:left; margin-right:10px; }
.content .searchlist li a{ font:bold 18px Arial, Helvetica, sans-serif; color:#666; }

JSFiddle

Upvotes: 5

Views: 4139

Answers (6)

WASasquatch
WASasquatch

Reputation: 1044

You are looking for list-style-type: not list-style: and then you need to set it's margin and padding to 0, or w/e

.content .searchlist {
    float: left;
    width: 700px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: red;
}

JSFiddle Example

Upvotes: 4

potashin
potashin

Reputation: 44581

Removing default padding-left (this indention ensures that the markers won't be pushed outside the list ) from ul and custom padding from li should work:

.content ul.searchlist { padding-left : 0; }
.content ul.searchlist li { padding : 10px 0; }

JSFiddle

Upvotes: 15

KoemsieLy
KoemsieLy

Reputation: 722

I think you should reset the default style sheet before another code. It is the best practice. For example below:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Upvotes: 4

ThorSummoner
ThorSummoner

Reputation: 18119

opera next, chrome, safari, and webkit all appear to be adding 40px of padding on the left:

Source:

ul, menu, dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

Fix:

#body-content > div > ul {padding-left:0;}

Upvotes: 3

ncf
ncf

Reputation: 556

Try this: 

.content .searchList {
   padding-left: 0px;
}

ul elements start with a bit of padding by default.

Upvotes: 1

user3351229
user3351229

Reputation: 105

Set padding to 0 :

.content .searchlist {
   background: none repeat scroll 0 0 #FF0000;
   float: left;
   list-style: none outside none;
   margin: 15px 0 0;
   width: 700px;
   padding: 0;
}

Upvotes: 0

Related Questions