4

これらの2つのアイテムを互いにインラインにする場合、各リストアイテムには画像とボタンがあり、ボタンは各画像の下にある必要があります。

<div id="cocktails">
    <ul>
        <li>
            <img src ="http://bokertov.typepad.com/.a/6a00d83451bc4a69e2014e8a8f894b970d-800wi" width="100px" height="100px">
            <button>Select</button>
        </li>
        <li>
            <img src ="http://bokertov.typepad.com/.a/6a00d83451bc4a69e2014e8a8f894b970d-800wi" width="100px" height="100px">
            <button>Select</button>
        </li>
    </ul>
</div>

CSS：

    #cocktails ul{margin:0;padding:0}
    #cocktails ul li{list-style-type:none;display:inline;padding:0}
    #cocktails ul li img{width:150px;height:150px;display:block;float:left;padding:0 10px}
    #cocktails ul li button{display:block;float:left}

しかし、ボタンは期待どおりに配置されていません。jsfiddleはここにあります：http： //jsfiddle.net/8KWGJ/

4

7 に答える 7

1

ボタンをliタグで囲みます：

<div id="cocktails">
<ul>
    <li>
        <img src ="http://bokertov.typepad.com/.a/6a00d83451bc4a69e2014e8a8f894b970d-800wi" width="100px" height="100px">
        </li>
    <li>   <button>Select</button>
    </li>
    <li>
        <img src ="http://bokertov.typepad.com/.a/6a00d83451bc4a69e2014e8a8f894b970d-800wi" width="100px" height="100px">
     </li>
    <li>   <button>Select</button>
    </li>
</ul>

示されているようにcssにコメントします。

#cocktails{float:left;width:419px}
#cocktails ul{margin:0;padding:0}
#cocktails ul li{list-style-type:none;display:inline;padding:0}
/*#cocktails ul li img{width:150px;height:150px;display:block;float:left;padding:0 10px}*/
 /*#cocktails ul li button{display:inline;}*/
于 2012-08-03T15:31:57.327 に答える
1

http://jsfiddle.net/8KWGJ/3/

<li>ボタンとその中の画像の代わりに、左に浮かせました

于 2012-08-03T14:24:26.297 に答える
0

追加

clear:both;ボタンと画像用。また、ボタンにある程度のマージンを与えます。

#cocktails{float:left;width:419px}
#cocktails ul{margin:0;padding:0}
#cocktails ul li{list-style-type:none;display:inline;padding:0;}
#cocktails ul li img{width:150px;height:150px;display:block;float:left;padding:0 10px; clear: both;}
#cocktails ul li button{display:block;float:left;clear:both; margin-left: 60px;}

http://jsfiddle.net/8KWGJ/8/

表示ブロックが機能しない場合があります。したがって、その使用では、display：blockでclearを使用します。左、右、または両方をクリアできます。したがって、要件に従って明確に使用してください。

お役に立てれば。

于 2012-08-03T14:27:48.757 に答える
0

フロートを画像からに変更しliます。

デモ

#cocktails ul {
  margin:0;
  padding:0;
}
#cocktails ul li{
  list-style-type:none;
  display:inline;
  float: left;
  padding:0;
}
#cocktails ul li img{
  width:150px;
  height:150px;
  display:block;
  padding:0 10px;
}
#cocktails ul li button {
  display:block;
}
于 2012-08-03T14:24:46.367 に答える
0

画像をに設定display:block;し、liをに 設定すると、float:left;問題が解決するはずです。

例

私はあなたのCSSをすべて削除し、あなたの問題を解決するために必要なものだけを暗示しました。

于 2012-08-03T14:25:50.353 に答える
0

あなたはこのようなことをすることができます：JSFIDDLE

変化する

#cocktails ul li{list-style-type:none;display:inline;padding:0}
#cocktails ul li img{width:150px;height:150px;display:block;float:left;padding:0 10px}
#cocktails ul li button{display:block;float:left}

に

#cocktails ul li{list-style-type:none;display:inline;padding:0;float:left;}
#cocktails ul li img{width:150px;height:150px;display:block;padding:0 10px}
#cocktails ul li button{display:block;margin:auto}

</ p>

于 2012-08-03T14:25:50.380 に答える
0

これは私にとってトリックでした。

#cocktails ul{margin:0;padding:0}
#cocktails ul li{list-style-type:none; width:150px; float:left; margin:10px;}
#cocktails ul li img{width:150px;height:150px; }
#cocktails ul li button{ margin-left:50px; width:50px}
于 2012-08-03T14:33:53.237 に答える