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

I have the following HTML:

我有以下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>

Fiddle: http://jsfiddle.net/snf9kae9/1/

How can I modify the JQuery/HTML to align the This is the first clikable link vertically centered and prevent the shifting of the text when the image changes.

如何修改JQuery / HTML以对齐这是第一个垂直居中的可clikable链接,并防止图像更改时文本的移位。

2 个解决方案

#1

First thing I'd try is putting the image inside a span and giving that fixed dimensions. Since I can't see why you have the inner span taking up the whole div, just use that

我要尝试的第一件事是将图像放在一个跨度内并给出固定的尺寸。因为我无法理解为什么你的内部跨度占据了整个div,所以就这样使用它

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

and add the styles

并添加样式

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

http://jsfiddle.net/awdhjo3p/

of course change the height and width to what you want

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

#2

I made image float to left, and also added padding for left and right separately.

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

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

how about this ?

这个怎么样 ?

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