html - 棘轮 : adding buttons in a list

Question

我有这个模型:www.guestinnation.com/mockup/list.html

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

不幸的是，Ratchet 的 CSS 非常复杂，它最终将这些按钮对齐到图像的右侧和(垂直)中间...猜猜如何做到这一点？

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

--> 酒店 客串 map

<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 上使用类 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>