Question

我有这个模拟：www.guestinnation.com/mockup/list.html

正如您所看到的那样，它是一个图像列表，但我希望在每个图像下面都有一行按钮：http://maker.github.io/ratchet/#buttons

不幸的是，Ratchet的CSS非常复杂，它最终将这些按钮对齐在图像中间的右侧和（垂直）......任何猜测该怎么做？

（我真的不能在这里发布所有CSS因为它很长......但它是你从他们的网站下载的标准版本）

- ＆gt; 旅馆 Guestinnation 地图

<ul class="list inset">
  <li class="hotelname">
    <img id="select" src="images/mufourseasons-b.png" align="center"/>
    <p class="hotelname">Four Seasons Hotel - 5*L - 20 m.</p>
    <!-- should I put the buttons here??? -->
  </li>
  <li class="hotelname">
    <img id="select" src="images/muarmani-b.png" align="center"/>
    <p class="hotelname">Armani Hotel - 5*L - 451 metres</p>
  </li>
  <li class="hotelname">
    <img id="select" src="images/muetdemilan-b.png" align="center"/>
    <p class="hotelname">Grand Hotel Et de Milan - 5*</p>
  </li>

</ul>

Answer 1

始终遵循一个整洁的标记，确保不要使用overflow：hidden，尽管我正在使用它。而是在我添加的DIV上使用class clearfix。

在这里，我为你修好了:)

jsfiddle.net/ajinkyax/kZbvw/

<li class="hotelname">
    <div>
            <img id="select" src="http://placehold.it/350x150" align="center">
            <p class="hotelname">Armani Hotel - 5*L - 451 metres</p>
    </div>
            <!-- put your buttons here -->
            <a class="button">Button</a>
            <a class="button">Button</a>
            <a class="button">Button</a>
            <a class="button">Button</a>
</li>

Answer 2

我尝试用你的代码玩一下，然后哇！这个棘轮的东西根本不是最好的。很难根据需要修改元素。问题是这个按钮有一个位置：绝对。而不是设置它的顶部和右侧。无论如何，我想出了两个不同的解决方案。

略好一点：在你的按钮周围创建一个div，然后给它一个定位相对和float：left。但你仍然需要调整你的左上角和左上角。

<li class="hotelname">
    <img id="select" src="images/mufourseasons-b.png" align="center">
    <p class="hotelname">Four Seasons Hotel - 5*L - 20 m.</p>
    <div class="wrap-button"><a class="button">Button</a></div>
  </li>

  .wrap-button{
       position: relative;
       float: left;
       top: 31px;
       left: -75px; }

或者您可以直接修改按钮，为您手动设置最佳坐标。类似的东西：

   <li class="hotelname">
    <img id="select" src="images/muarmani-b.png" align="center">
    <p class="hotelname">Armani Hotel - 5*L - 451 metres</p>
    <a class="button">Button</a>
   </li>
   .button
     top: 100%;
     right: 63%;

棘轮：在列表中添加按钮

2 个答案: