棘轮：在列表中添加按钮

我有这样的实物模型：www.guestinnation.com/mockup/list.html棘轮：在列表中添加按钮

正如你可以看到它是一个图像列表，但我想有以下各图像这样的按钮线：http://maker.github.io/ratchet/#buttons

不幸的是，棘轮的CSS它相当复杂，它最终将这些按钮对齐在图像的右侧和（垂直）...任何猜测如何做到这一点？

（我真的不能张贴在这里所有的CSS，因为它的长... ...但它是你从他们的网站下载的标准之一）

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

来源

2013-09-26 Giovanni Dominoni

始终遵循一个整洁的标记，湄确保不使用溢出：虽然即时通讯使用它隐藏。而是在我添加的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>

来源

2013-09-26 10:21:51 STEEL

谢谢。在JSFiddle中似乎工作正常，所以我复制并粘贴到我的文件（当然是CSS和HTML），但没有，它不工作......所以我试图把整个HTML和CSS放在Jsfiddle中，并猜测什么，它不工作在那里以及...所以我想问题是在ul风格... –

不使用这样的CSS：ul li.hotelname 改为使用.hotelname {风格.. 。} – STEEL

谢谢，它现在可以工作，我已经把图像和按钮放在同一个div中，对按钮使用了绝对定位，并且在定位时玩过:)谢谢！ –

我试着打了一下你的代码和woww！这棘轮的东西并不是最好的。非常难以根据需要修改元素。问题是，这个按钮有一个位置：绝对。而不是置顶和正确的。无论如何，我想出了两种不同的解决方案。

略好：在你的按钮周围创建一个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%;

来源

2013-09-26 10:30:24

谢谢，我尝试了两种解决方案，但它似乎不起作用。该按钮卡在图像中间的左侧位置，我无法使用“顶部”或“左侧”移动它。我想这是因为在样式表中有一些[class * =“button”]，它使它难以改变类的按钮样式中的任何东西，而不会弄得乱七八糟......看起来他们乐意让它无法使用顶栏外的按钮...... –

棘轮：在列表中添加按钮

回答

相关问题