Question

我试图将每个li元素放在自己的行中。每个li元素左侧包含一个img，一些文本作为描述。还有一个要求，一切都应该是响应。现在，编写的代码足够响应，但它不会分别放置每个li元素。这是代码：

＆＃13;

func setUpUI() {
    let logoImage = UIImage.init(named: "logoImage")
    let logoImageView = UIImageView.init(image: logoImage)
    logoImageView.frame = CGRectMake(-40, 0, 150, 25)
    logoImageView.contentMode = .ScaleAspectFit
    let imageItem = UIBarButtonItem.init(customView: logoImageView)
    let negativeSpacer = UIBarButtonItem.init(barButtonSystemItem: .FixedSpace, target: nil, action: nil)
    negativeSpacer.width = -25
    navigationItem.leftBarButtonItems = [negativeSpacer, imageItem]
}

＆＃13;

.portfolio-images {
  margin: auto auto auto 30px;
}
.portfolio-image {
  float: left;
  margin: auto 10px 10px 5px;
}
#portfolio-images ul {
  list-style: none;
}
.portfolio-images li {
  display: block;
}

＆＃13;

请帮忙解决这个问题。

Answer 1

你还没有清除.portfolio-images的浮动。有many ways这样做，在这种情况下，我在overflow: auto课程中使用了.item，我已将其应用于所有li代码：

＆＃13;

.item {
  overflow: auto;
}
.portfolio-images {
  margin: auto auto auto 30px;
}
.portfolio-image {
  float: left;
  margin: auto 10px 10px 5px;
}
#portfolio-images ul {
  list-style: none;
}
.portfolio-images li {
  display: block;
}

＆＃13;

<div class="container-fluid" id="portfolio-images">
  <ul>
    <li class="item">
      <img class="portfolio-image img-responsive" src="http://i64.tinypic.com/2ltg2h4.jpg">
      <h3>kitty</h3>
      <p>ipsum kitty itsum sit on the fur watching the grass. grass shine in sun burning bright light on the buildings. fan schemrring in the light. house painted yellow, black and red.</p>
    </li>
    <li class="item">
      <img src="http://i64.tinypic.com/2ltg2h4.jpg" alt="devops" class="portfolio-image img-responsive">
      <h3>kitty</h3>
      <p>ipsum kitty itsum sit on the fur watching the grass. grass shine in sun burning bright light on the buildings. fan schemrring in the light. house painted yellow, black and red.</p>
    </li>
    <li class="item">
      <img src="http://i64.tinypic.com/2ltg2h4.jpg" alt="devops" class="portfolio-image img-responsive">
      <h3>kitty</h3>
      <p>ipsum kitty itsum sit on the fur watching the grass. grass shine in sun burning bright light on the buildings. fan schemrring in the light. house painted yellow, black and red.</p>
    </li>    
    
  </ul>
</div>

＆＃13;

正确对齐li元素

1 个答案: