0

コードの動作を示すjsfiddle http://jsfiddle.net/zkLav/を作成しました。何が起こっているかというと、画像とテキストの配置がステップスタッキングであり、垂直方向に配置されていないということです。なぜこれが起こっているのか誰でも説明できますか？

CSSマークアップ:

.outList {
    display:table;
}
.outList span {
    display:table-cell;
    vertical-align:middle;
    width:10%;
}
.outList h4 {
    display:table-cell;
    vertical-align:middle;
    width:50%;
    padding-left: 10px;
}
.outList p {
    float:right;
    display:table-cell;
    vertical-align:middle;
    /*width:30%;*/
    text-align:right;
}
.outList img {
    width:100%;
}

HTMLマークアップ:

<ul>
    <li data-theme="c">
    <a href="detail.html">
        <div class="outList">
            <span><img src="simgs/listview_chk.png" /></span>
            <h4>Warmup</h4>
            <p>5 Minutes</p>
        </div>                             
    </a>                  
    </li> 

    <li data-theme="c">
    <a href="detail.html">
        <div class="outList">
            <span><img src="simgs/listview_chk.png" /></span>
            <h4>Machine Press</h4>
            <p>3 sets of</p>
        </div>                             
    </a>                  
    </li>

    <li data-theme="c">
    <a href="detail.html">
        <div class="outList">
            <span><img src="simgs/listview_chk.png" /></span>
            <h4>Lateral Pulldowns</h4>
            <p>3 sets of</p>
        </div>                             
    </a>                  
    </li>
</ul>​
​

問題の適切なイメージ:

ここに画像の説明を入力

4

2 に答える 2

2

OK、このアップデートを見てください

次の.cssクラスで幅を削除するだけです。

.outList img {
    width: 100%;
}

アップデート

右側のテキストを完全に揃えるには、クラスfloat:right;からを削除します。p

.outList p {
    float:right;
    display:table-cell;
    vertical-align:middle;
    /*width:30%;*/
    text-align:right;
}

この新しいアップデートを確認してください

于 2012-06-07T19:12:22.147 に答える
0

div を取り除きます。li があるので必要ありません。

また、なぜimgにまたがるのですか？それもやめなさい。

あなたがそれをしたとき、ulをテーブルとして、liを行として、そしてaの中のものを列として置きます。

于 2012-06-07T19:05:04.300 に答える