如何保證內容擴展而不移動所述內容

/摺疊我有以下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垂直居中和防止圖像改變時文本的移動。

enter image description here

來源

2015-04-22 SearchForKnowledge

第一件事，我想嘗試是把一個跨度內的圖像，並給予該固定尺寸。由於我不明白爲什麼你有內寬度佔整個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/

當然改變高度和寬度到你想要的

來源

2015-04-22 21:08:30 wunth

這很好。謝謝。 – SearchForKnowledge

我使圖像浮動到左側，並且還分別爲左側和右側添加了填充。

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

這個怎麼樣？

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

來源

2015-04-22 21:09:26 tanaydin

這個工作原理除了擴大後的圖像移動太多。 +1的努力和幫助我解決另一個問題。 – SearchForKnowledge

如何保證內容擴展而不移動所述內容

回答

相關問題