如何水平列出产品？

Question

我有这个列表，有两个产品作为例子。可能有多个产品，但现在只有两个产品用于此问题。

.horizontal {
  display: inline;
  float:left;
}
.product{
    display: block;
    height: 320px;
    border: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    text-align: center;
    padding: 10px 5px;
}
.image{
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
    max-height: 180px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    padding-left:.45cm;
}

<ul class="horizontalul">
  <li class="horizontal" style="display: inline;">
    <div class="product">
      <div class="image">
        <img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
      </div>
      <div class="description">
        <h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
      </div>
      <div class="price">
        <span>Rs. 37,900</span>
        <input type="button" class="btn btn-primary btn-sm" value="Details" />
      </div>
    </div>
  </li>
  <li class="horizontal" style="display: inline;">
    <div class="product">
      <div class="image">
        <img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
      </div>
      <div class="description">
        <h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
      </div>
      <div class="price">
        <span>Rs. 37,900</span>
        <input type="button" class="btn btn-primary btn-sm" value="Details" />
      </div>
    </div>
  </li>
</ul>

我已将horizontal类设置为显示为内联，但它似乎不像我希望的那样工作。我的项目是水平对齐的。如何让它们水平对齐？

Answer 1

来了：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111111;
}

<ul>
  <li class="horizontal" style="display: inline;">
    <div class="product">
      <div class="image">
        <img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
      </div>
      <div class="description">
        <h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
      </div>
      <div class="price">
        <span>Rs. 37,900</span>
        <input type="button" class="btn btn-primary btn-sm" value="Details" />
      </div>
    </div>
  </li>
  <li class="horizontal" style="display: inline;">
    <div class="product">
      <div class="image">
        <img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
      </div>
      <div class="description">
        <h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
      </div>
      <div class="price">
        <span>Rs. 37,900</span>
        <input type="button" class="btn btn-primary btn-sm" value="Details" />
      </div>
    </div>
  </li>
</ul>

Answer 2

只需将super添加到您的样式中或者如果要显示RTL使用public class CheckpointedTest { public static void main(String[] args) throws Exception { StreamExecutionEnvironment env = StreamExecutionEnvironment.getExecutionEnvironment(); env.enableCheckpointing(5000); env.setParallelism(2); List<Integer> list = new ArrayList<Integer>(); for (int i = 0; i < 10; i++) { list.add(i); } DataStream<Integer> test = env.fromCollection(list); test.map(new CheckpointedFunction()); env.execute(); } }

Answer 3

只需添加浮动：在你的班级左边也使用浮动：对，但不要忘记给下一个块元素清除：两者，尝试一次

＆＃13;

＆＃13;

.horizontal {
  display: inline;
  float:left;
  padding:10px 5px;
  border:1px solid #dddddd;
  margin-right:5px;
  }

＆＃13;

<ul>
  <li class="horizontal" style="display: inline;">
    <div class="product">
      <div class="image">
        <img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
      </div>
      <div class="description">
        <h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
      </div>
      <div class="price">
        <span>Rs. 37,900</span>
        <input type="button" class="btn btn-primary btn-sm" value="Details" />
      </div>
    </div>
  </li>
  <li class="horizontal" style="display: inline;">
    <div class="product">
      <div class="image">
        <img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
      </div>
      <div class="description">
        <h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
      </div>
      <div class="price">
        <span>Rs. 37,900</span>
        <input type="button" class="btn btn-primary btn-sm" value="Details" />
      </div>
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;