在標題中格式化h1

我遇到'Jackie''Bella'標誌下的問題。我唯一可以解決的方法是使用一個換行符，這會導致大量的空間被添加。任何人都有如何解決這個問題的建議。在標題中格式化h1

HTML：

<div class="header"> 
<div class="wrapper"> 
    <h1><a href="#">Bella<i>by Jackie</i></a></h1> 
    <ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="whatwedo.html">What We Do</a></li> 
    <li><a href="features.html">Features</a></li> 
    <li><a href="benefits.html">Benefits</a></li> 
    <li><a href="#">Gallery</a></li> 
    <li><a href="contact.html">Contact</a></li> 
    </ul> 
</div>

CSS：

.header h1 { 
float: left; 
line-height: inherit; 
background: #969; 
padding: 0px 30px 0px 30px; 
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); 
border-radius: 0px 0px 2px 2px; 
margin-top: 0px; 
} 

.header h1 a { 
margin-bottom:-20px; 
} 

.header h1 i { 
font-family: 'Lobster', cursive; 
font-size: medium; 
font-style: normal; 
padding-left: 0.5em; 
padding-top: -10px; 
} 

.header h1 a { 
font-family: 'Lobster', cursive; 
font-size: 36px; 
}

這裏是一個參考http://jsfiddle.net/XxEaz/

來源

2013-10-14 user2402731

您可以簡單地設置它到display:block，達到了預期的效果。無需添加更多HTML。

jsFiddle here

.header h1 i { 
    display: block; 
}

來源

2013-10-14 17:12:52

太感謝了，你不」 t知道我現在覺得多麼愚蠢 – user2402731

@ user2402731不客氣。很高興幫助:) –

使用此代碼：

添加此CSS類：

span{ 
    display:block; 
}

和編輯HTML這樣的：

<div class="header"> 
     <div class="wrapper"> 
      <h1><a href="#">Bella<i><span>by Jackie</span></i></a></h1> 
     </div> 
</div>

jsFiddle is here

來源

2013-10-14 17:13:58

add display：block;到

.header h1 i { 
    font-family:'Lobster', cursive; 
    font-size: medium; 
    font-style: normal; 
    padding-left: 0.5em; 
    padding-top: -10px; 
    display:block; 
}

來源

2013-10-14 17:15:03

首先：如果可以，將I標籤更改爲SPAN標籤。它的語義目的是用於參考書目文獻：書/雜誌/文章標題。

二：裹「貝拉」和「成龍」各自在自己的SPAN：

<h1> 
    <a href="#" title=""> 
    <span class="header-title org">Bella</span> 
    <span class="header-title owner">By Jackie</span> 
    </a> 
</h1>

現在你的CSS只需要：

來源

2013-10-14 19:18:08 Roralee

在標題中格式化h1

回答

相關問題