列表之间的空格，ul左侧的空格。 如何删除？
[英]Space between list, space on left side of the ul. How to remove this?
问题描述
I don't want spaces between my list and there is also a space on left side. 
我不希望列表之间有空格，左侧也没有空格。 And please tell me how to have simple scrolling effect with pure css. 并且请告诉我如何使用纯CSS来实现简单的滚动效果。 And please tell me a source from where i can learn about the compatibility issues between css properties (if there is any) 并且请告诉我一个来源，从那里我可以了解CSS属性之间的兼容性问题（如果有的话）
body { margin: 0; } #nav { position: fixed; z-index: 1; top: 0; left: 0; right: 0; height: auto; color: #000000; background-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 1em; font-weight: bolder; } #nav ul { margin: 0; } #nav li { display: inline-block; line-height: 3em; width: auto; padding: 0 1em; } a { color: inherit; text-decoration: none; } #menu_advanced_search:hover { color: #FFFFFF; background-color: #0066FF; } #menu_advanced_search { color: #FFFFFF; background-color: #0066FF; } #menu_explore:hover { color: #FFFFFF; background-color: #FFFF00; } #menu_explore { color: #FFFFFF; background-color: #FFFF00; } #menu_forum:hover { color: #FFFFFF; background-color: #009900; } #menu_forum { color: #FFFFFF; background-color: #009900; } #menu_report_a_bug:hover { color: #FFFFFF; background-color: #FF0000; } #menu_report_a_bug { color: #FFFFFF; background-color: #FF0000; } #menu_feedback:hover { color: #FFFFFF; background-color: #CC0099; } #menu_feedback { color: #FFFFFF; background-color: #CC0099; } #menu_login_signup:hover { color: #FFFFFF; background-color: #000000; } #menu_login_signup { color: #FFFFFF; background-color: #000000; } #main { background-color: #FFFFFF; height: 100%; left: 0; right: 0; } #advanced_search { background-color: #0066FF; height: 100%; left: 0; right: 0; } #explore { background-color: #FFFF00; height: 100%; left: 0; right: 0; } #forum { background-color: #009900; height: 100%; left: 0; right: 0; } #report_a_bug { background-color: #FF0000; height: 100%; left: 0; right: 0; } #feedback { background-color: #CC0099; height: 100%; left: 0; right: 0; } #login_signup { background-color: #000000; height: 100%; left: 0; right: 0; }
<html> <head> <title>CARZPEDIA</title> </head> <body> <div id="nav"> <ul> <li id="menu_advanced_search"><a href="#advanced_search">ADVANCED SEARCH</a> </li> <li id="menu_explore"><a href="#explore">EXPLORE</a> </li> <li id="menu_forum"><a href="#forum">FORUM</a> </li> <li id="menu_report_a_bug"><a href="#report_a_bug">REPORT A BUG</a> </li> <li id="menu_feedback"><a href="#feedback">FEEDBACK</a> </li> <li id="menu_login_signup"><a href="#login_signup">LOGIN/SIGNUP</a> </li> </ul> </div> <div id="main" class="scrolleffect"> </div> <div id="advanced_search" class="scrolleffect"> </div> <div id="explore" class="scrolleffect"> </div> <div id="forum" class="scrolleffect"> </div> <div id="report_a_bug" class="scrolleffect"> </div> <div id="feedback" class="scrolleffect"> </div> <div id="login_signup"> </div> </body> </html>
3 个解决方案
解决方案1
4 已采纳 2014-10-02 18:49:55
You could achieve this by doing the following: 您可以通过执行以下操作来实现：
#nav ul {
margin: 0;
padding-left: 0; /* add padding-left: 0; to remove the space on left side of the ul */
font-size: 0; /* add font-size: 0; to remove the white space between inline-block elements */
}
#nav li {
display: inline-block;
line-height: 3em;
width: auto;
padding: 0 1em;
font-size: 16px; /* add font-size: 16px; to reset the font-size to li (i.e 1em = 16px) */
}
body { margin: 0; } #nav { position: fixed; z-index: 1; top: 0; left: 0; right: 0; height: auto; color: #000000; background-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 1em; font-weight: bolder; } #nav ul { margin: 0; padding-left: 0; font-size: 0; } #nav li { display: inline-block; line-height: 3em; width: auto; padding: 0 1em; font-size: 16px; } a { color: inherit; text-decoration: none; } #menu_advanced_search:hover { color: #FFFFFF; background-color: #0066FF; } #menu_advanced_search { color: #FFFFFF; background-color: #0066FF; } #menu_explore:hover { color: #FFFFFF; background-color: #FFFF00; } #menu_explore { color: #FFFFFF; background-color: #FFFF00; } #menu_forum:hover { color: #FFFFFF; background-color: #009900; } #menu_forum { color: #FFFFFF; background-color: #009900; } #menu_report_a_bug:hover { color: #FFFFFF; background-color: #FF0000; } #menu_report_a_bug { color: #FFFFFF; background-color: #FF0000; } #menu_feedback:hover { color: #FFFFFF; background-color: #CC0099; } #menu_feedback { color: #FFFFFF; background-color: #CC0099; } #menu_login_signup:hover { color: #FFFFFF; background-color: #000000; } #menu_login_signup { color: #FFFFFF; background-color: #000000; } #main { background-color: #FFFFFF; height: 100%; left: 0; right: 0; } #advanced_search { background-color: #0066FF; height: 100%; left: 0; right: 0; } #explore { background-color: #FFFF00; height: 100%; left: 0; right: 0; } #forum { background-color: #009900; height: 100%; left: 0; right: 0; } #report_a_bug { background-color: #FF0000; height: 100%; left: 0; right: 0; } #feedback { background-color: #CC0099; height: 100%; left: 0; right: 0; } #login_signup { background-color: #000000; height: 100%; left: 0; right: 0; }
<html> <head> <title>CARZPEDIA</title> </head> <body> <div id="nav"> <ul> <li id="menu_advanced_search"><a href="#advanced_search">ADVANCED SEARCH</a> </li> <li id="menu_explore"><a href="#explore">EXPLORE</a> </li> <li id="menu_forum"><a href="#forum">FORUM</a> </li> <li id="menu_report_a_bug"><a href="#report_a_bug">REPORT A BUG</a> </li> <li id="menu_feedback"><a href="#feedback">FEEDBACK</a> </li> <li id="menu_login_signup"><a href="#login_signup">LOGIN/SIGNUP</a> </li> </ul> </div> <div id="main" class="scrolleffect"> </div> <div id="advanced_search" class="scrolleffect"> </div> <div id="explore" class="scrolleffect"> </div> <div id="forum" class="scrolleffect"> </div> <div id="report_a_bug" class="scrolleffect"> </div> <div id="feedback" class="scrolleffect"> </div> <div id="login_signup"> </div> </body> </html>
解决方案2
1 2014-10-02 18:22:41
add float:left for #nav li it will fix the issue 为#nav li添加float:left它将解决此问题
body { margin: 0; } #nav { position: fixed; z-index: 1; top: 0; left: 0; right: 0; height: auto; color: #000000; background-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 1em; font-weight: bolder; } #nav ul { margin: 0; } #nav li { display: inline-block; line-height: 3em; width: auto; padding: 0 1em; float:left; } a { color: inherit; text-decoration: none; } #menu_advanced_search:hover { color: #FFFFFF; background-color: #0066FF; } #menu_advanced_search { color: #FFFFFF; background-color: #0066FF; } #menu_explore:hover { color: #FFFFFF; background-color: #FFFF00; } #menu_explore { color: #FFFFFF; background-color: #FFFF00; } #menu_forum:hover { color: #FFFFFF; background-color: #009900; } #menu_forum { color: #FFFFFF; background-color: #009900; } #menu_report_a_bug:hover { color: #FFFFFF; background-color: #FF0000; } #menu_report_a_bug { color: #FFFFFF; background-color: #FF0000; } #menu_feedback:hover { color: #FFFFFF; background-color: #CC0099; } #menu_feedback { color: #FFFFFF; background-color: #CC0099; } #menu_login_signup:hover { color: #FFFFFF; background-color: #000000; } #menu_login_signup { color: #FFFFFF; background-color: #000000; } #main { background-color: #FFFFFF; height: 100%; left: 0; right: 0; } #advanced_search { background-color: #0066FF; height: 100%; left: 0; right: 0; } #explore { background-color: #FFFF00; height: 100%; left: 0; right: 0; } #forum { background-color: #009900; height: 100%; left: 0; right: 0; } #report_a_bug { background-color: #FF0000; height: 100%; left: 0; right: 0; } #feedback { background-color: #CC0099; height: 100%; left: 0; right: 0; } #login_signup { background-color: #000000; height: 100%; left: 0; right: 0; }
<html> <head> <title>CARZPEDIA</title> </head> <body> <div id="nav"> <ul> <li id="menu_advanced_search"><a href="#advanced_search">ADVANCED SEARCH</a> </li> <li id="menu_explore"><a href="#explore">EXPLORE</a> </li> <li id="menu_forum"><a href="#forum">FORUM</a> </li> <li id="menu_report_a_bug"><a href="#report_a_bug">REPORT A BUG</a> </li> <li id="menu_feedback"><a href="#feedback">FEEDBACK</a> </li> <li id="menu_login_signup"><a href="#login_signup">LOGIN/SIGNUP</a> </li> </ul> </div> <div id="main" class="scrolleffect"> </div> <div id="advanced_search" class="scrolleffect"> </div> <div id="explore" class="scrolleffect"> </div> <div id="forum" class="scrolleffect"> </div> <div id="report_a_bug" class="scrolleffect"> </div> <div id="feedback" class="scrolleffect"> </div> <div id="login_signup"> </div> </body> </html>
解决方案3
0 2014-10-02 18:33:11
add display:inline-block for #nav li . 为#nav li添加display:inline-block 。 It will fix the issue and avoid the pain points of floats. 它将解决此问题并避免浮标的痛苦。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何删除2之间的空白 <ul> 的 - How to remove empty space between 2 <ul>'s
如何删除ul和li之间的空间 - How to remove space between ul and li
删除ul元素左侧的多余空白 - Remove extra white space at the left of ul element
从中删除左侧空间 <ul> 导航 - Remove the left space from <ul> navigation
如何去除页面右侧和右侧之间的空间 - how to remove space between and right side of page
如何清除之间的空白 <ul> s，带有水平列表组（boostrap 4）？ - How to remove empty space between <ul>s, with list-group-horizontal (boostrap 4)?
删除列表项左侧的空间 - Remove space on the left of list items
如何删除页面左右两侧的空白？ - How to remove white space left and right side of page?
如何摆脱UL左侧的空间？ - How to get rid of the space on the left of a UL?
删除列表左侧的空间<li> - Remove space at the left side of listing <li>
相关标签