Question

我正在尝试将H2和Span放在一行中。目前对于H2，我使用了BG颜色，并试图将span属性放在同一行。可能吗？我把它们放在一个宽度为79％的DIV上。这是HTML代码：

.author_name h3 {
  background-color: #1d305b;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
  margin-top: 102px;
  opacity: 0.9;
  padding: 15px 20px;
}

.author_name {
  display: inline-block;
  margin-left: -3px;
  width: 79%;
}

<div class="author_name">

  <h3>Carlos</h3><span style="float:right;"><a class="uibutton icon add" href="#button">Message</a></span>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting</p>

</div>

这段代码有什么问题？我试图清除DIV但没有工作。我也试图申请跨越display-inline参数，但没有解决方案。实际上，我想将跨度放在同一条线上，具有相同颜色的h2 BG颜色，但不知道是否可能？任何建议都会很棒：）

Answer 1

这可能会帮助您入门，实际上并不需要span元素（除非您有其他用途）

＆＃13;

.author_name {
    display: inline-block;
    margin-left: -3px;
    width: 79%;
}

.author_name h3 {
  float: left;
  background-color: #1d305b;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
  margin-top: 102px;
  opacity: 0.9;
  padding: 15px 20px;
}

p {
  clear: both
}

a {
  margin-top: 102px;
  display: block;
  padding: 5px;
  float: right;
  background: red;
  text-decoration: none;
  color: white;
}

＆＃13;

<div class="author_name">

  <h3>Carlos</h3>
  <a class="uibutton icon add" href="#button">Message</a>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting</p>

</div>

＆＃13;

H2元素和跨度在一行

1 个答案: