html - 横に置くそれを壊しますか？

Question

<ul>これは私が使用している水平線のコードです：

.list ul{
    width: 100%;
}

.list li{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    padding-bottom: 20px;
}

これを使用して、私がこれを行う場合：

<ul class="list">
    <li>
       <img src="myImg.png" />
       <span class="edit"></span>
       <span class="delete"></span>
    </li>
</ul>

<br>その後、すべて機能しますが、画像と編集/削除ボタンの間に置くと、たとえば次のようになります。

<ul class="list">
    <li>
       <img src="myImg.png" />
       <br />
       <span class="edit"></span>
       <span class="delete"></span>
    </li>
</ul>

次にリストが壊れ、画像が水平ではなく垂直のリストに表示されます。動作中のスクリーンショット：

動作しないときのスクリーンショット：

何か案は？

Answer 1

The solution is to use: display:inline-block on your li element which then allows all other markup to function correctly, both in and out of your list.

inline-block: The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element

Here is a jsfiddle showing an example.

The above jsfiddle is now edited to support older IE7 to work alongside modern browsers. The order of the .css for display is important. To throw in support for IE6, then additonal _height: 30px; where 30 is your required height needs to be added. But IE6 browser use is less than 1%.

Answer 2

交換してください

display: inline

と

float: left

フィドルの例

Answer 3

.list li {float：left;に使用してみてください。}代わりに{display：inline; }そして動作します。