html - 如何在元素中证明 li

Question

我如何在 ul 中调整 li 元素，但在最后一行，元素向左浮动，如 http://www.barrelny.com/blog/text-align-justify-and-rwd/ - 图 6 我想这样做:

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

<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>

Answer 1

试试这个 html

<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>

CSS

ul{
  max-width:87%;
  background-color:grey;
  display:table;
}
.floatright
{
    float:right
}
li{
    margin:15px;
   float:left; 
    width: 250px;
      height:270px;
      background-color:pink;
      display:table-cell;
      margin-bottom:10px;}