填充權太大

Question

我的標題框太寬。它只應該和它內部的名爲「WEBSITE TITLE」的標題文本一樣寬。

是否有可能讓我的填充權與我當前的填充左相同，大約5px左右？

FIDDLE這裏... FIDDLE

HTML：

<footer class="main_footer"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-12"> 
       <div class="container-fluid"> 
        <div class="text-center-footer-text">  
         <a href="#"> 
          <h4>WEBSITE<span> TITLE</span></h4> 
         </a>  
        </div> 
        <p>Cool website.</p> 
        <p><a href="#">text1</a></p> 
        <p><a href="#">text2</a></p> 

       </div> 
      </div> 
     </div> 
    </div> 
</footer> 

CSS：

.text-center-footer-text h4 { 
    font-size: 20px; 
    padding: 5px; 
    color: green; 
    font-family: Agency FB; 
    font-weight: normal; 
    background-color: black; 
    border: 5px solid blue; 
} 

.text-center-footer-text h4 span { 
    color: red; 
} 

Answer 1

設置display: inline-block或display: table到h4

.text-center-footer-text h4 { 
 
    font-size: 20px; 
 
    padding: 5px; 
 
    color: green; 
 
    font-family: Agency FB; 
 
    font-weight: normal; 
 
    background-color: black; 
 
    border: 5px solid blue; 
 
    display: inline-block; 
 
} 
 
.text-center-footer-text h4 span { 
 
    color: red; 
 
}

<footer class="main_footer"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="container-fluid"> 
 
      <div class="text-center-footer-text"> 
 
      <a href="#"> 
 
       <h4>WEBSITE<span> TITLE</span></h4> 
 
      </a> 
 
      </div> 
 
      <p>Cool website.</p> 
 
      <p><a href="#">text1</a> 
 
      </p> 
 
      <p><a href="#">text2</a> 
 
      </p> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</footer>

Answer 2

嘗試

display:inline-block. 

http://jsfiddle.net/sunp5usj/2/

希望這會有所幫助。

商祺！