CSS unordered list indent space to the left and right
Question
Basically I have navigation bar inside my "main" div, and its indented to the left.
I cannot figure out where does this indentation come from, I tried padding/margin 0, padding-left/margin-left 0 but still nothing, It won't move even one inch!
I even tried mozilla firebug inspector to try to find out if I selected it right, basically no solution.
And here is html/css file if someone would have time to take a sneaky-beaky onto HTML code:
body { background-color: #000; color: white; } /* Style for tabs */ #main { color: 111; width: 600px; margin: 8px auto; } #main > li, #main > ul > li { list-style:none; float:left; } #main ul a { display:block; padding:6px 10px; text-decoration:none!important; margin:1px 1px 1px 0; color:#FFF; background:#444; } #main ul a:hover { color:#FFF; background:#111; } #main ul a.selected { margin-bottom:0; color:#000; background:snow; border-bottom:1px solid snow; cursor:default; } #main div { padding:10px 10px 8px 10px; *padding-top:3px; *margin-top:-15px; clear:left; background:snow; height: 300px ; } #main div a { color:#000; font-weight:bold; } #male, #female, #all, #new { color: black; }
<!DOCTYPE html> <html lang="en"> <head> <title>2015 Race Finishers</title> <meta charset="utf-8"> <link rel="stylesheet" href="my_style.css"> </head> <body> <header> <h2>2015 Race Finishers</h2> </header> <div id="main"> <ul class="idTabs"> <li><a href="#male">Male Finishers</a></li> <li><a href="#female">Female Finishers</a></li> <li><a href="#all">All Finishers</a></li> <li><a href="#new">Add New Finishers</a></li> </ul> <div id="male"> <h4>Male Finishers</h4> <ul id="finishers_m"></ul> </div> <div id="female"> <h4>Female Finishers</h4> <ul id="finishers_f"></ul> </div> <div id="all"> <h4>All Finishers</h4> <ul id="finishers_all"></ul> </div> <div id="new"> <h4>Add New Finisher</h4> <form id="addRunner" name="addRunner" action="service.php" method="POST"> First Name: <input type="text" name="txtFirstName" id="txtFirstName" /> <br> Last Name: <input type="text" name="txtLastName" id="txtLastName" /> <br> Gender: <select id="ddlGender" name="ddlGender"> <option value="">--Please Select--</option> <option value="f">Female</option> <option value="m">Male</option> </select><br> Finish Time: <input type="text" name="txtMinutes" id="txtMinutes" size="10" maxlength="2" />(Minutes) <input type="text" name="txtSeconds" id="txtSeconds" size="10" maxlength="2" />(Seconds) <br><br> <button type="submit" name="btnSave" id="btnSave">Add Runner</button> <input type="hidden" name="action" value="addRunner" id="action"> </form> </div> </div> <footer> <h4>Congratulations to all our finishers!</h4> <br>Last Updated: <div id="updatedTime"></div> </footer> <script src="scripts/jquery-1.6.2.min.js"></script> <script src="scripts/my_scripts.js"></script> <script src="scripts/jquery.idTabs.min.js"></script> </body> </html>
This is just for learning purpose, but I would really love if I could somehow solve this problem, biggest thing is that I have no clue where does it come from.
3 answers
solution1
1 ACCPTED 2015-06-27 20:33:06
Simply add padding: 0; to #main ul or .idTabs and that fixes your problem.
Also you may want to move list-style: none; from #main > li, #main > ul > li to #main ul as well: it's just nicer semantics.
The padding comes from the user default stylesheet. If you inspect the <ul > tag you'll notice something along the lines of -webkit-padding-start: 40px; . So by setting padding:0 we are ensuring all browsers have no padding, thus solving your problem. It's a good habit to add margin:0; and padding:0 to ensure all browsers look the same (if not, at least have more resemblance).
solution2
0 2015-06-27 19:22:25
I couldn't understand where the indentation is coming from. But I found using a negating margin solves the problem for now.
#mian ul{ margin-left: -2.5em;}
The rest of the part you can figure it out.
Let me know please if you find where the indentation is coming from and if the left margin works for you.
solution3
0 2015-06-28 05:25:04
The reason of this space(padding-left) is ul. < UL > element has some left padding by default in order to follow listing structure. So here problem is nothing but the same.
It has padding-left:40px; by default, i guess.
Add this to your CSS file:
ul
{ padding: 0;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.