动态<li>没有响应

Question

我在for循环中创建了<li>的动态列表。需要什么CSS才能使列表响应？我还尝试将列表设为float:left;和width:100%;，但问题仍未解决。

<div class="right_column col-md-10 ">
 <div class="search_lawyers_by_province">

  <div class="search_links">
    <ul>
    <?php 

    foreach ($provinces as $province)
    {
     echo "<li><a title='Abogados $province->name' 
     href='<?=province->clean_url>'</a><?=province->clean_url></li>";

   //output
     <a title="Abogados La Coruña" 
     href="http://localhost/bus_car_blue/abogados/la-coruna/">La Coruña</a>

    }
    ?>
   </ul>

  </div>
 </div>
</div>

的style.css

.right_column ul li a {
color: #727272;
font-size: 14px;
font-family: "Trebuchet MS";
display: block;

}
 .search_lawyers_by_province {
 margin-bottom: 20px;
}
.search_links {
 background: #f3efe6;
 padding: 10px;
}
.right_column ul {
 -webkit-column-count: 5;
 -moz-column-count: 5;
 column-count: 5;
 width: 940px;
}
.right_column ul li {
 list-style: none;
 display: block;
 float: left;
 min-width: 145px;
 margin-bottom: 5px;
 background: url(../images/list_bullet.png) no-repeat;
 background-position: left center;
 padding-left: 15px;
 margin-left: 5px;
 display: inline-block;
 width: 180px;
 background-position: 0 5px;
}

动态列表视图

以下是动态列表视图

Answer 1

您已对<ul>的宽度进行了硬编码。将您的.right_column ul更改为

.right_column ul {
  -webkit-column-count: 5;
  -moz-column-count: 5;
  column-count: 5;
  width: 100%; /* Change to 100% */
  padding: 0; /* remove the padding */
}

然后添加媒体查询以根据屏幕宽度调整列数。

.right_column ul li a {
  color: #727272;
  font-size: 14px;
  font-family: "Trebuchet MS";
  display: block;
}
.search_lawyers_by_province {
  margin-bottom: 20px;
}
.search_links {
  background: #f3efe6;
  padding: 10px;
}
.right_column ul {
  -webkit-column-count: 5;
  -moz-column-count: 5;
  column-count: 5;
  width: 100%; /* Change to 100% */
  padding: 0; /* remove the padding */
}
.right_column ul li {
  list-style: none;
  display: block;
  float: left;
  min-width: 145px;
  margin-bottom: 5px;
  background: url(../images/list_bullet.png) no-repeat;
  background-position: left center;
  padding-left: 15px;
  margin-left: 5px;
  display: inline-block;
  width: 180px;
  background-position: 0 5px;
}

@media (max-width: 1024px)
{
  .right_column ul {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 768px)
{
  .right_column ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 480px)
{
  .right_column ul {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

<div class="right_column col-md-10 ">
 <div class="search_lawyers_by_province">

  <div class="search_links">
    <ul>
      <li><a title="Abogados La Coruña" 
     href="http://localhost/bus_car_blue/abogados/la-coruna/">La Coruña1</a></li>
      <li><a title="Abogados La Coruña" 
     href="http://localhost/bus_car_blue/abogados/la-coruna/">La Coruña2</a></li>
      <li><a title="Abogados La Coruña" 
     href="http://localhost/bus_car_blue/abogados/la-coruna/">La Coruña3</a></li>
      <li><a title="Abogados La Coruña" 
     href="http://localhost/bus_car_blue/abogados/la-coruna/">La Coruña4</a></li>
      <li><a title="Abogados La Coruña" 
     href="http://localhost/bus_car_blue/abogados/la-coruna/">La Coruña5</a></li>
      <li><a title="Abogados La Coruña" 
     href="http://localhost/bus_car_blue/abogados/la-coruna/">La Coruña6</a></li>
      <li><a title="Abogados La Coruña" 
     href="http://localhost/bus_car_blue/abogados/la-coruna/">La Coruña7</a></li>
      <li><a title="Abogados La Coruña" 
     href="http://localhost/bus_car_blue/abogados/la-coruna/">La Coruña8</a></li>
      <li><a title="Abogados La Coruña" 
     href="http://localhost/bus_car_blue/abogados/la-coruna/">La Coruña9</a></li>
      <li><a title="Abogados La Coruña" 
     href="http://localhost/bus_car_blue/abogados/la-coruna/">La Coruña10</a></li>
      <li><a title="Abogados La Coruña" 
     href="http://localhost/bus_car_blue/abogados/la-coruna/">La Coruña11</a></li>
      <li><a title="Abogados La Coruña" 
     href="http://localhost/bus_car_blue/abogados/la-coruna/">La Coruña12</a></li>
      <li><a title="Abogados La Coruña" 
     href="http://localhost/bus_car_blue/abogados/la-coruna/">La Coruña13</a></li>
      <li><a title="Abogados La Coruña" 
     href="http://localhost/bus_car_blue/abogados/la-coruna/">La Coruña14</a></li>
   </ul>

  </div>
 </div>
</div>