Horizontal list element evenly spaced and responsive

问题

I am creating an unordered list that contains images and text, and would like each item to be 1/3rd the width with a margin, evenly spaced. I can't figure out how to ensure, in a responsive website, the items are always exactly 1/3rd the width, including margins. Percentages seem to not remain consistent across browsers.

HTML

<ul>
    <li><img>Text</li>
    <li><img>Text</li>
    <li><img>Text</li>
    <li><img>Text</li>
    <li><img>Text</li>
    <li><img>Text</li>
</ul>

CSS

ul {list-style:none; text-align:center; margin:0;}
ul li {display:inline-block; zoom:1; *display:inline; vertical-align:top; width:32%; margin:10px 1%;}

If I want two rows of three columns here, it will sometimes look fine and other times push the third item down to the next row--almost as if some browsers are adding a pixel or two somewhere. Is there CSS that I can use to just space it evenly across the entire width of the parent element?

Note that the site is responsive so calculating exact pixels isn't going to work. I'd also rather avoid writing separate CSS for different browsers, if possible.

回答1:

There's a couple of ways to tackle this, but the easiest CSS solution is to use inline-blocks for the li elements. Now the issue with inline-block is, they will take whitespace into account, breaking your layout, but there are two easy solutions for this in the markup:

HTML comments between the li elements;
Compressed HTML code.

Example with HTML comments:

<ul>
    <li><img>Text</li><!--
 --><li><img>Text</li><!--
 --><li><img>Text</li><!--
 --><li><img>Text</li><!--
 --><li><img>Text</li><!--
 --><li><img>Text</li>
</ul>

Example with compressed HTML:

<ul><li><img>Text</li><li><img>Text</li><li><img>Text</li><li><img>Text</li><li><img>Text</li><li><img>Text</li></ul>

For the CSS, this should do the trick (you can modify the width of the 'columns' in media queries).

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

  li {
    display: inline-block;
    width: 50%;
  }

@media screen and (min-width: 20em) {

  li {
    width: 33.33333%;
  }

}

Another thing to note is that you can't use margins on the left and right of these items, as they will not be part of the original width, but you can use padding on the inside to "space" elements apart. This is also how some of the repsonsive grid systems are built (a little more advanced, but same principle).

Here's the live code: http://codepen.io/TheDutchCoder/pen/zxxwom

回答2:

Here is a cross-browser solution. I have added an html5 structure if you need to include images in your list.

/* the two following properties modify the box-model so that padding is removed from the width instead of being added */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul:after { /* to clearfix your ul list */
  content: "";
  display: table;
  clear: both;
}
ul li {
  display: block; /* inline-block have an extra 4px margin wich makes it harder to use in this situation */
  width: 33.3333333%; /* You get it (100/3) but use exact number */
  padding: 10px 5px;
  float: left; /* if you use block elements you have to float them */
  text-align: center;
}
figure {
  margin: 0; /* to normalize figure element */
}
figure img {
  max-width: 100%;
  max-height: 100%;
}

<ul>
  <li>
    <figure>
      <img src="http://placehold.it/500x500" />
      <figcaption>Text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500" />
      <figcaption>Text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500" />
      <figcaption>Text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500" />
      <figcaption>Text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500" />
      <figcaption>Text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500" />
      <figcaption>Text</figcaption>
    </figure>
  </li>
 
</ul>

回答3:

Try this: http://jsfiddle.net/j13889cx/

I've added a div element wrapping everything inside each li element called .ul-wrap.

This allows you to add any margin/padding you'd like because .ul-wrap is a block element.

Try changing .ul-wrap's margin or padding.

来源：https://stackoverflow.com/questions/27023641/horizontal-list-element-evenly-spaced-and-responsive

标签

html

css

responsive-design