发表新帖
发表新帖

Best way to manage whitespace between inline list items

后端 未结
关注
8 1120
悲哀的现实
悲哀的现实 2020-11-28 06:48

My HTML is as follows:

相关标签:
8条回答
  • 借酒劲吻你
    2020-11-28 07:02

    A better solution for list items is to use:

    #nav li{float:left; width:auto;}

    Has exactly the same visual effect without the headache.

    0 讨论(0)
  • 长发绾君心
    2020-11-28 07:08

    I had the same Problem and none of the above solutions could fix it. But I found out this works for me:

    Instead of this:

    <ul id="nav">
   <li><a href="./">Home</a></li>
   <li><a href="/About">About</a></li>
   <li><a href="/Contact">Contact</a></li>
</ul>

    build your html code like this (whitespace before and after the link text): 

    <ul id="nav">
   <li><a href="./"> Home </a></li>
   <li><a href="/About"> About </a></li>
   <li><a href="/Contact"> Contact </a></li>
</ul>
    0 讨论(0)
  • 陌清茗
    2020-11-28 07:08 
    <html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline;  content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
</body>
</html>
    0 讨论(0)
  • 青春惊慌失措
    2020-11-28 07:13

    Another useful way to eliminate the whitespace is to set the list's font-size property to 0 and the list elements' one back to the required size.

    0 讨论(0)
  • 陌清茗
    2020-11-28 07:15

    What you really want is the CSS3 white-space-collapse: discard. But I'm not sure if any browsers actually support that property.

    A couple alternative solutions is to let the tailing end of a tag consume the whitespace. For example:

    <ul id="nav"
    ><li><a href="./">Home</a></li
    ><li><a href="/About">About</a></li
    ><li><a href="/Contact">Contact</a></li
></ul>

    Another thing I've seen done is to use HTML comments to consume whitespace

    <ul id="nav"><!--
    --><li><a href="./">Home</a></li><!--
    --><li><a href="/About">About</a></li><!--
    --><li><a href="/Contact">Contact</a></li><!--
--></ul>

    See thismat's solution if you are okay using floats, and depending on the requirements you might need to add a trailing <li> that is set to clear: both;.

    But the CSS3 property is probably the best theoretical way.

    0 讨论(0)
  • 我在风中等你
    2020-11-28 07:19

    Several options here, first I'll give you my normal practice when creating inline lists:

    <ul id="navigation">
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
</ul>

    Then the CSS to make it function as you intend:

    #navigation li 
  {
    display: inline;
    list-style: none;
  }
#navigation li a, #navigation li a:link, #navigation li a:visited
  {
    display: block;
    padding: 2px 5px 2px 5px;
    float: left;
    margin: 0 5px 0 0;
  }

    Obviously I left out the hover and active sets, but this creates a nice block level navigation, and is a very common method for doing this while still keeping with standards. /* remember to tweak to your liking, add color to the background, et cetera */

    If you would like to keep it just with text and just inline, no block elements I believe you'd want to add:

       margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */

    Realizing you would like to REMOVE the whitespace, just adjust the margins/padding accordingly.

    0 讨论(0)
 看不清?
提交回复
热议问题