Question

好的，这是我试图实现的效果：

根据HTML：

<div class = "options">
          <a href = "#" class = 'bot-link' value = 2><i class="icon-arrow-left"></i> Close</a>
              <ul>
                <li>
                  <h3 value = 0>say hi</h3>
                  <p>(press L)</p>
                  <img src = "../resources/plus.png"/>
                </li>
                <li>
                  <h3 value = 1>Like</h3>
                  <p>(press L)</p>
                  <img src = "../resources/plus.png"/>
                </li>
                <li>
                  <h3 value =2>commiserate</h3>
                  <p>(press L)</p>
                  <img src = "../resources/plus.png"/>
                </li>
                <li>
                  <h3 value =3>Ask</h3>
                  <p>(press L)</p>
                  <img src = "../resources/plus.png"/>
                </li>
              </ul>
        </div>

我需要水平对齐（与h3空间垂直中心的图像）和p在

内的同一行。我的问题是我无法实现这一点并且与前2个lis有一个奇怪的同一行问题：

这是CSS：

.options ul {
    margin-left: 0;
padding: 0;
margin: 0;
}
.options ul li {
    margin: 0;
    padding: 0;
        float: left;
}
.options {
    float: left;
position: fixed;
margin-left: 50%;
left: 50%;
/* background: black; */
margin-left: -100px;
padding: auto;
z-index: 10;
width: 200px;
top: 33%;
}

.options ul li h3 {
    margin: 0;
    cursor: pointer;
    text-transform: uppercase;
    text-align: left;
        transition: all 90ms ease-out;

}

.options ul li p {
    display: none;
}

.options img {
    width: 30px;
}

这里有什么问题？

Answer 1

h3和p标记为block level elements（默认情况下为display: block），因此每个标记都会占据整个“行”并将图像推送到下一行。

将display: inline-block应用于h3元素（以及p元素），您应该得到您所追求的内容。 h3上的示例：

.options ul li h3 {
    margin: 0;
    cursor: pointer;
    text-transform: uppercase;
    text-align: left;
    transition: all 90ms ease-out;

    /* add this */
    display: inline-block;
}

.options ul li上的左侧浮动也可能导致单独的问题，但我不确定它是否是您想要的效果。

CSS：不能将元素水平对齐li？

1 个答案: