突出顯示文本 - 如何獲得一致的填充？

我無法讓該段顯示，因爲我想。文字和背景的端部之間的填充應該是在每行上一致，如圖這個圖像突出顯示文本 - 如何獲得一致的填充？

Picture of Padding Problem

HTML

<div id="title-image-container"> 
    <?php echo '<img src="'.get_post_meta($id, 'title-image', true).'">' ?> 
    <div class="highlight-title"><p><?php the_title(); ?></p></div> 
</div>

CSS

#title-image-container { 
    float: left; 
} 
.highlight-title { 
    position: relative; 
    top: -300px; 
    padding: 5px 5px 5px 10px; 
} 
.highlight-title p { 
    background-color: red; 
    display: inline; 
    color: #000;  
    font: 1.9em 'oswald'; 
    line-height: 60px; 
    padding: 0 10px; 
} 
#content img { 
    height: auto; 
    margin: 0; 
    max-width: 100%; 
}

來源

2013-03-24 psot

嘗試刪除填充並設置文本邊距。 – 2013-03-24 18:14:42

謝謝，但它只在第一行中引入了左邊距，而不是左邊距。 – psot 2013-03-24 18:26:28

@psot：從問題中刪除解決方案，並使用該解決方案創建答案。然後接受你自己的答案來結束這個問題。 – 2013-03-25 15:05:51

在

這將使你的工作完成 -

p{padding-left:5px; 
padding-right:5px; 
text-align:justify; 
word-spacing:5px;}

來源

2013-03-24 18:57:09

謝謝，我會試一試並更新。由於IE8不支持box-shadow，這將是一個更好的解決方案。 – psot 2013-03-27 22:44:26

我解決了這個問題，只是用基於另一個website上發現的評論替換了填充方塊陰影。

.highlight-title p { 
    box-shadow: 10px 0 0 0 red, -10px 0 0 0 red; 
    background-color: red; 
    display: inline; 
    color: #000;  
    font: 1.9em 'oswald'; 
    line-height: 60px; 
}

來源

2013-03-27 22:33:12 psot

突出顯示文本 - 如何獲得一致的填充？

回答

相關問題