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％）。这样，他们就不会互相混淆。

非浮动的一个问题 - 每个其他的问题可能是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..
}

感觉就像是发生了点击！

Answer 2

以下是您的代码的jsfiddle，这对于让人们看到互动并快速诊断问题非常有帮助。

这个问题基本上是双重的，你需要float:left的图像。并且您的边界框需要匹配图像的确切大小。在示例中，由于没有图像，我使用了200px。

在html中，所有元素都是可点击的，但是你需要jQuery（轻松处理事件）来捕获click事件并“执行”某些事情（回调函数）。然后，您只需将光标设置为指针，以便UI 感觉就像一个可点击的项目。

示例jQuery项目将是：

$('.item img').on('click',function(){
       // Do something here.
       alert('img clicked');
});

建议使用类而不是id，小问题。

这几乎与上面的答案相同......只是看到了它。

Answer 3

不太确定你要求的是什么，所以我把所有东西都横向了..希望这有帮助

HTML：

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

CSS：

.finger:hover{cursor:pointer;}

在HTML 5中垂直对齐div

3 个答案:

回答第一个

回答第二个问题