Question

我开始练习创建一个网站，但是我的图像水平显示有问题。我尝试使用display：inline-block，但图片保持垂直。对不起，如果这是一个简单的错误，但它已经困扰了我几个小时。部分HTML：

/*Main CSS*/

/*All Styling*/

* {
  background-color: #f2f2f2;
}
/*All Text Styling*/

a {
  text-decoration: none;
  color: gray;
  font-family: 'Open Sans Condensed', sans-serif;
}
/*Visited Page and Hover Link Color*/

a:visited,
a:hover {
  color: #838383;
}
/*Body Styling*/

body {}
/*Section and Footer Wrapper*/

#sfwrapper {
  max-width: 940px;
  background: #f2f2f2;
  text-align: center;
  font-size: 1em;
  color: gray;
}
/*Ordered Lists*/

ol {
  list-style-type: none;
}
/*Head*/

h1 {
  text-align: center;
  font-weight: normal;
  line-height: 0.5em;
  color: #8c8c8c;
}
/*Subhead*/

h2 {
  text-align: center;
  font-weight: normal;
  color: #8c8c8c;
}
/*NAV Styling*/

nav {
  text-align: center;
  padding: 10px 0;
}
/*Gallery Styling*/

#gallery {
  display: inline-block;
}
/*Footer Styling*/

footer {
  font-size: 0.75em;
}

<ol id="gallery">
  <li>
    <a href="img/placeholder.png">
      <img src="img/placeholder.png" alt="">
    </a>
    <p>placeholder</p>
  </li>
  <li>
    <a href="img/placeholder.png">
      <img src="img/placeholder.png" alt="">
    </a>
    <p>placeholder</p>
  </li>
  <li>
    <a href="img/placeholder.png">
      <img src="img/placeholder.png" alt="">
    </a>
    <p>placeholder</p>
  </li>
  <li>
    <a href="img/placeholder.png">
      <img src="img/placeholder.png" alt="">
    </a>
    <p>placeholder</p>
  </li>
</ol>

Answer 1

在CSS中的display: inline-block;上弹出li。

#gallery li {
    display: inline-block;
}

以下是一个实例：http://codepen.io/alexmccabe/pen/VjzzjZ，我添加的代码位于CSS的底部。

除此之外，我不会在元素上使用ID，除非你有充分的理由，它可能会在未来产生特殊性问题。

显示：内联块不适合我

1 个答案: