私は次のHTML定義を持っています。（私はノックアウトを使用しています）
<ul data-bind="foreach: itemList">
<li>
<span data-bind="text: displayName"></span>
<span class="right" data-bind="text: measurement"></span>
<input type="checkbox" />
</li>
</ul>
これらを次のように並べて表示したい
Item1 measurement1 Checkbox1
Item2 measurement2 Checkbox2
Item3 measurement3 Checkbox3
これを次のように調整したいと思います。
列1は左端に浮かんでいます。
列3（入力チェックボックス）は右端に浮かんでいます。
列2は右端にありますが、列3の左側にあります。
DIVとfloat / display属性を操作してみました。
希望する視覚的動作を実現できませんでした。
どうすればこれを達成できますか？
floatとtext-align？
li {
display:block;
text-align:right;
width:200px;/* whatever width you set here or in parent */
}
li :first-child {
float:left;
}
input {
vertical-align:middle;/* ? */
}<ul data-bind="foreach: itemList">
<li>
<span data-bind="text: displayName">item</span>
<span class="right" data-bind="text: measurement">measure</span>
<input type="checkbox" />
</li>
</ul>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加