如何在不改变内容的情况下确保内容扩展/折叠

Question

我有以下HTML：

<div class="hidContent">
    <div class="hidOverflow fullWidth">
        <div id="ctl00_BodyPlaceHolder_CBExpServPage">
            <div class="header"><span><img src="theImages/arrow_right.png" id="imgType" />This is the first clickable link</span></div>
            <div class="content hidContent">
                <tfText01>
                    <p style="padding: 20px; border: 0px; font-style: italic; color: rgb(51, 51, 51); line-height: 23px; font-size: 14px; text-shadow: rgba(255, 255, 255, 0.8) 1px 1px 1px; font-family: Verdana, Tahoma, Arial;">It offers you the following convenient features:</p>
                    <ul style="padding-left: 45px; border: 0px; list-style: none; color: rgb(51, 51, 51); font-family: Verdana, Tahoma, Arial; font-size: small;">
                        <li style="padding: 5px; border: 0px; text-indent: -0.7px;">First UL list to get everything else working.</li>
                        <li style="padding: 5px; border: 0px; text-indent: -0.7px;">Second UL list to get everything else working.</li>
                    </ul>
                </tfText01>
            </div>
        </div>
    </div>
</div>

小提琴：http://jsfiddle.net/snf9kae9/1/

如何修改JQuery / HTML以使This is the first clikable link垂直居中对齐，并防止图像更改时文本的移位。

Answer 1

我要尝试的第一件事是将图像放在一个跨度内并给出固定的尺寸。因为我不明白为什么你的内部跨度占据整个div，所以只需使用

<div class="header"><span><img src="theImages/arrow_right.png" id="imgType" /></span>This is the first clickable link</div>

并添加样式

.header span {
    width: 20px;
    height: 12px;
    display: inline-block;
}

http://jsfiddle.net/awdhjo3p/

当然会将高度和宽度更改为您想要的

Answer 2

我将图像浮动到左边，并且还分别为左右添加了填充。

    #imgType {
        padding-left: 1%;
        padding-right: 1%;
        float: left;
    }

怎么样？

http://jsfiddle.net/snf9kae9/3/