html - How do I remove the margins for li's in an ul? -
this question has reply here:
a space between inline-block list items [duplicate] 8 answersi have unordered list bunch of li's. can't seem remove margins between li's.
here's like:
and looks now:
what seek next?
jsfiddle:
http://jsfiddle.net/narzero/76egxmt9/
html:
<body> <div class="content_panel active"> <ul class="unstyled items_board"> <li class="item_header">first</li> <li class="has_details item">one</li> <li class="has_details item">two</li> <li class="has_details item">three</li> <li class="has_details item">four</li> <li class="has_details item">five</li> <li class="has_details item">six</li> <li class="item_header">second</li> <li class="has_details item">one</li> <li class="has_details item">two</li> <li class="has_details item">three</li> <li class="has_details item">four</li> <li class="has_details item">five</li> <li class="has_details item">six</li> </ul> </div> </body> css:
body { background: #fcfcfc; font-family: "open sans", "helvetica neue", helvetica, sans-serif; } .content_panel .active { display: inherit; } .unstyled { margin-left: 0; list-style: none; /* border:1px solid #e5edec; */ } ul { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 40px; margin: 0 0 10px 25px; list-style: none; padding-left: 0; margin-left: 0; } li { line-height: 20px; } ul > .unstyled { margin-left: 0; list-style: none; } .items_board { padding: 4px; min-height: 500px; } .item_header { background: transparent; width: 100%; margin-right: 0; padding: 0; margin-bottom: 20px; margin-top: 42px; cursor: auto; border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .item_header:first-child { margin-top: 8px; } .items_board .item { height: 300px; margin: 0 -1px -1px 0; display: inline-block; position: relative; vertical-align: top; width: 205px; background: #fff; text-align: left; color: #5a5a5a; font-weight: 400; border: 1px solid #e5edec; } .has_details { cursor: pointer; }
add font-size: 0; .unstyled add together font-size (e.g. 16px) li remove white space between inline-block elements this:
jsfiddle - demo
.unstyled { font-size: 0; margin-left: 0; list-style: none; /* border:1px solid #e5edec; */ } li { line-height: 20px; font-size: 16px; } or: add together float: left; li - demo
more info:
fighting space between inline block elements - chris coyier
html css
No comments:
Post a Comment