0

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

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

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

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

--> 酒店游客地图 

<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>

4

2 回答 2

0

始终遵循整洁的标记，确保不要使用溢出：隐藏，尽管我正在使用它。而是在我添加的 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>
于 2013-09-26T10:21:51.853 回答
0

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

稍微好一点：在你的按钮周围创建一个 div，而不是给它一个相对定位和浮动：左。但是你仍然需要调整你的顶部和左侧位置。

<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%;
于 2013-09-26T10:30:24.080 回答