0

製品スペックシートを使用するリストがあります。これは私がこれまでに持っているコードです:

<div class="productspec">

<ul>
<li>Product Description</li>
<li>Device Type</li>
<li>Bundled Services</li>
<li>Form Factor</li>    
<li>Processor</li>
<li>RAM</li>
<li>Hard Drive</li>
<li>Data Link Protocol</li>    
<li>Power</li>
<li>Dimensions (WxDxH)</li>
<li>Manufacturer Warranty</li>
<li>Bundled with</li>    
</ul>

</div>

各機能はリストの左側に表示されますが、各機能の説明を各機能の右側に表示したいと考えています。

こうなりたいけど、どうしたらいいのかわからない

ここに画像の説明を入力

機能の説明を同じリストに入れることでこれを行うことは可能ですか?

フィドル

4

2 に答える 2

2

要素内でネストされた複数のspanタグを使用し、タグに割り当てて、いくつかの固定を割り当てる必要がありますlidisplay: inline-block;spanwidth

デモ

.productspec {
    border-style:solid;
    border-width:1px;
    border-color:#CCC;
}

.productspec li:nth-child(even) {
    background-color: rgb(245,245,245);
}

.productspec li {
    text-indent:10px;
    line-height:30px;
    list-style:none;
}

ul li span {
    display: inline-block;
}

ul li span:nth-of-type(1) {
    width: 250px;
}

tableまた、表形式のデータを使用することは間違っていないtableとtr言いたいtdです。

于 2013-11-08T10:18:51.397 に答える
0

スタイルシートで、要件に応じてパディングを追加します

  <style type="text/css">

    span{ padding-left:20px;}

    </style>

    <ul>
    <li><span> Product Description</span>   <span>Product Description2</span></li>
    </ul>
于 2013-11-08T10:24:42.477 に答える