javascript - css - 有没有办法让 div 与 h1(多行)在同一第二行？

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

为了将两个文本 block 对齐在同一行上，您只需要将它们都设置为“内联”。为此，只需应用 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>