如何证明元素中的li

Question

我怎样才能证明ul里面的li元素，但是在最后一行，元素像http://www.barrelny.com/blog/text-align-justify-and-rwd/一样浮动到左边 - 图6 我想这样做：

＆＃13;

＆＃13;

ul{
  width:100%;
  background-color:grey;
}
li{width: 250px;
      height:270px;
      background-color:pink;
      display: inline-block;
      margin-bottom:10px;}

＆＃13;

<ul>
      <li>
        <div>1</div>
      </li>
      <li>
        <div>2</div>
      </li>
      <li>
        <div>3</div>
      </li>
      <li>
        <div>4</div>
      </li>
      <li>
        <div>5</div>
      </li>
      <li>
        <div>6</div>
      </li>
      <li>
        <div>7</div>
      </li>
      </ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个 的 HTML

<!-- Script for Image Background -->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="slideshow_theme/supersized.shutter.min.js"></script>

<script type="text/javascript">
    jQuery(function ($) {
        $.supersized({
            // Functionality
            slide_interval: 10000,    // Length between transitions
            transition: 1,            // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
            transition_speed: 1000,   // Speed of transition

            // Components
            slide_links: 'blank',     // Individual links for each slide (Options: false, 'num', 'name', 'blank')
            slides: [                 // Slideshow Images
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title: 'Image Credit: Maria Kazvan', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url: 'http://www.nonsensesociety.com/2011/04/maria-kazvan/' },
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title: 'Image Credit: Maria Kazvan', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url: 'http://www.nonsensesociety.com/2011/04/maria-kazvan/' },
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title: 'Image Credit: Maria Kazvan', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url: 'http://www.nonsensesociety.com/2011/04/maria-kazvan/' },
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title: 'Image Credit: Colin Wojno', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url: 'http://www.nonsensesociety.com/2011/03/colin/' },
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title: 'Image Credit: Colin Wojno', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url: 'http://www.nonsensesociety.com/2011/03/colin/' },
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title: 'Image Credit: Colin Wojno', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url: 'http://www.nonsensesociety.com/2011/03/colin/' },
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title: 'Image Credit: Brooke Shaden', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url: 'http://www.nonsensesociety.com/2011/06/brooke-shaden/' },
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title: 'Image Credit: Brooke Shaden', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url: 'http://www.nonsensesociety.com/2011/06/brooke-shaden/' },
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title: 'Image Credit: Brooke Shaden', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url: 'http://www.nonsensesociety.com/2011/06/brooke-shaden/' }
            ]
        });
    });
</script>

<强> CSS

<ul>
  <li>
    <div>1</div>
  </li>
  <li>
    <div>2</div>
  </li>
  <li>
    <div>3</div>
  </li>
  <li>
    <div>4</div>
  </li>
  <li>
    <div>5</div>
  </li>
  <li>
    <div>6</div>
  </li>
  <li class="floatright">
    <div>7</div>
  </li>
  </ul>