Question

我尝试格式化h3类red-column下的所有文字，以便左侧有一些边距。

我目前有一些css表示red-column之后的所有内容应该保留15px的剩余边距。

但是，当文字换行时，它不再有余量。

如何解决这个问题，即使换行时它的余量也只剩下15px？

这是我的codepen的链接 http://codepen.io/aahmed2/pen/xERqKB?editors=1000

＆＃13;

.red-column {
  background: #d00000;
  color: #fff;
  padding: 10px;
}
.red-column ~ a,
.red-column ~ h4 {
  margin-left: 15px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h2>Pet Diseases</h2>

  <div class="col-md-4">
    <h3 class="red-column">Dogs</h3>
    <h4>General Resources</h4>
    <a href="http://www.pethealthnetwork.com/which-canine-vector-borne-diseases-are-my-area" target="_blank">Which Canine Vector-Borne Diseases Are In My Area? (PHN)</a>
    <br>
    <a href="http://www.pethealthnetwork.com/dog-health/dog-checkups-preventive-care/what-does-your-dogs-urine-color-mean" target="_blank">What Does Your Dog's Urine Color Mean? (PHN)</a>
    <br>
    <a href="http://www.pethealthnetwork.com/dog-health/dog-diseases-conditions-a-z/6-tick-borne-diseases-you-should-know-about" target="_blank">6 Tick-Borne Diseases You Should Know About (PHN)</a>
    <h4>Diseases</h4>
    <a href="/resources/anaplasmosis.asp">*Anaplasmosis</a>
    <br>
    <a href="/resources/brucellosis.asp">*Brucellosis</a>
    <br>
    <a href="/resources/cryptosporidium.asp">*Cryptosporidium</a>
    <br>
    <a href="/resources/e-coli.asp">*E. coli</a>
    <br>
    <a href="/resources/tick-diseases.asp">*Ehrilichiosis</a>
    <br>
  </div>
  <div class="col-md-4">
    <h3 class="red-column">Cats</h3>
    <h4>General Resources</h4>
    <a href="http://www.pethealthnetwork.com/what-feline-infectious-diseases-are-my-area" target="_blank">What Feline Infectious Diseases Are in My Area? (PHN)</a>
    <br>
    <a href="http://www.pethealthnetwork.com/dog-health/dog-diseases-conditions-a-z/6-tick-borne-diseases-you-should-know-about" target="_blank">6 Tick-Borne Diseases You Should Know About (PHN)</a>
    <br>
    <a href="http://www.pethealthnetwork.com/cat-health/cat-diseases-conditions-a-z/7-causes-cat-sneezing" target="_blank">7 Causes of Cat Sneezing (PHN)</a>
    <br>
    <h4>Diseases</h4>
    <a href="/resources/anaplasmosis.asp">*Anaplasmosis</a>
    <br>
    <a href="/resources/cryptosporidium.asp">*Cryptosporidium</a>
    <br>
    <a href="/resources/q-fever.asp">*Q Fever</a>
    <br>
  </div>

  <div class="col-md-4">
    <h3 class="red-column">Amphibians &amp; Reptiles</h3>

    <h3 class="red-column">Rodents</h3>
    <a href="/resources/q-fever.asp">*Q Fever</a>
    <br>
    <a href="/resources/leptospirosis.asp">*Leptospirosis</a>
    <br>

    <h3 class="red-column">Birds</h3>
    <a href="/resources/q-fever.asp">*Q Fever</a>
    <br>

  </div>

</div>

＆＃13;

Answer 1

将这些部分放入DIV并给它们一个具有该边距的类：

http://codepen.io/anon/pen/gwLmWg?editors=1100

在此示例中

class="x"

.x {
   margin-left: 15px;
}

Answer 2

由于 @klikas ：

，修正了它

.red-column ~ a,
.red-column ~ h4 {
   display: inline-block;
   margin-left: 15px;
}

在元素下的所有内容中添加边距

2 个答案: