Question

我正在研究这个问题：

<h1><span>Test Heading This is text that I want to make appear to the right This is text that I want to make appear to the right This is text that I want</span></h1> 
<div>This is text that I want to make appear to the right of the heading and above the blue base line. This is text that I want to make appear to the right of the heading and above the blue base line.  </div>

这是风格：

.bb {
    border-bottom: 1px solid #999;
    padding-bottom: 10px;
    background-color: pink;
    overflow: hidden;
}
h1 {
    font-size: 1.3em;
    font-family: calibri, arial;
    margin-bottom: 5px;
    float: left;
}
h1 span {
    color: #fff;
    background-color: #446688;
    padding: 1px 5px 3px 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

有没有办法让div在同一第二行与h1（多行）

https://jsfiddle.net/tarjoadi/w5q6qqLv/

这是我想要的： screenshot

请帮忙。

由于

Answer 1

为了在同一行上对齐两个文本块，您只需要将它们都设置为“内联”。要执行此操作，只需应用css样式：display: inline;

您还需要删除float: left;，否则您可能无法获得所需的结果。

h1 {
    font-size: 1.3em;
    color: #fff;
    background-color: #446688;
    /* float: left; */
}

/* New styles */
h1, div.inline {
    display: inline !important;
}

<h1><span>Test Heading This is text</span></h1> 
<div class="inline">This is text that I want to make appear to the right of the heading</div>

Answer 2

您也可以在不使用h1标记的情况下执行此操作。

＆＃13;

.bb {
  border-bottom: 1px solid #999;
  padding-bottom: 10px;
  background-color: pink;
  overflow: hidden;
}
p {
  margin-bottom: 5px;
  float: left;
}
p span {
  font-family: calibri, arial;
  font-size: 1.3em;
  color: #fff;
  background-color: #446688;
  padding: 1px 5px 3px 5px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

＆＃13;

<p>
  <span>Test Heading This is text that I want to make appear to the right This is text that I want to make appear to the right This is text that I want</span>
  This is text that I want to make appear to the right of the heading and above the blue base line. This is text that I want to make appear to the right of the heading and above the blue base line.
</p>

＆＃13;

类似的问题：<h1>, <h2>, <h3>... tags, inline within paragraphs (<p>)

css - 有没有办法在h1（多行）的同一第二行上使用div？

2 个答案: