javascript - 在 HTML 5 中垂直对齐 div

Question

在垂直方向上，我尝试自己制作一个旋转木马，而不使用任何其他工具，例如 Bootstrap。

我遇到过图像没有水平对齐的情况。我拼命地尝试分别使用display: inline-block 和float: left，但他们似乎不是我的情况。此外，使用不同的技术处理溢出也不会影响 div。

这是我的 HTML 结构:

<div id="image-slider">
    <div id="images">
        <div class="item"><img src="images/image0.jpg"></div>
        <div class="item"><img src="images/image1.jpg"></div>
        <div class="item"><img src="images/image2.jpg"></div>
        <div class="item"><img src="images/image3.jpg"></div>
        <div class="item"><img src="images/image4.jpg"></div>
    </div>
    <ul id="indicator">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <input type="button" class="switch" id="prev" value="&lt;">
    <input type="button" class="switch" id="next" value="&gt;">
</div>

相应的CSS代码如下:

#image-slider, .item, .item img { /* Tried removing the ".item img" but the images were too big if so */
    width: 100%;
    height: 100%;
}

#image-slider {
    position: relative;
    overflow: hidden;
}

#indicator {
    position: absolute;
    bottom: 0;
}

#images, .item { position: relative; }
.item { display: inline-block; }

那我该如何解决呢？哦，还有一个问题:如何修改#indicator，让里面的元素是可点击的元素(不用工具)？

Answer 1

第一个答案

一件事可能是 display: inline-block 的使用，另一种使用 float: left 的方法要求其他标签具有 float: right 这样它们就可以漂浮在彼此的前面。

然后给它们一个宽度，假设左边的 div 是 60%，右边的是 35%(你也可以使用 40%)。这样，它们就不会相互混淆。

非 float 冲突中的一个问题可能是 div 的宽度超过了允许的宽度。为防止出现这种情况，您可以使用 max-width 来确保它们具有此值的最大值并且不会超过该值。

第二个问题的答案

您可以使用 jQuery 创建一个可点击的元素:

$('selector').click(function () {
 /* trigger click with 
  * $(this).trigger('click') or do what ever you want..
  */
}

这样，您可以使元素可点击，并使用更改光标

selector {
  cursor: pointer; // to create a pointer for that..
}

感觉就像发生了点击!