Question

我的标题框太宽了。它应该只与其中称为“WEBSITE TITLE”的标题文本一样宽。

是否有可能让我的padding-right与我当前的padding-left相同，大约是5px？

FIDDLE HERE ...... 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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

尝试

display:inline-block.

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

希望这会有所帮助。

问候！

填充权 - 太大了

2 个答案: