0

私はこのようなコードを持っています: 

<ul>
   <li>some text <img src="path" style="height:15px;width:25px;" /></li>
   <li>some text <img src="path" style="height:15px;width:25px;" /></li>
   <li>some text <img src="path" style="height:15px;width:25px;" /></li>
</ul>

私が欲しいのは、「いくつかのテキスト」とimgがテーブルの2つの列であるかのようにきちんと来るはずです。また、テキストが "ab" のように小さい場合、画像はその位置を変更してはいけません。また、テキストの長さが 80 を超える場合、img はテキストの後にのみ配置する必要があります。必要に応じてさらに情報を提供します。
ありがとう

4

2 に答える 2

2 
<li><span style="min-width:80px; display: inline-block;">some text</span>
<img src="path" style="height:15px;width:25px; float:left;" /></li>

これは機能します...

于 2012-05-22T13:49:04.573 に答える
0

次のように、リスト項目内にいくつかのスパン タグといくつかの CSS を追加することで、問題を解決できます。

<style type="text/css">

li {
    clear: left;
}

li span {
    display:block;
    float: left;
    width: 140px;
}

li img {
    float: left;
}
​
</style>

<ul>
    <li><span>some text</span><img src="path" style="height:15px;width:25px;" /></li>
    <li><span>some text bla bla bla</span><img src="path" style="height:15px;width:25px;" /></li>
    <li><span>some text</span><img src="path" style="height:15px;width:25px;" /></li>
</ul>​

この結果はこちらで確認できます: http://jsfiddle.net/magnusohlin/xhLmx/

于 2012-05-22T13:56:58.220 に答える