H2要素と1行の範囲

Question

私はH2とSpanを1行に入れようとしています。現在、私はH2のためにBGの色を使い、同じ行にスパンの属性を入れようとしています。出来ますか？私は79％の幅を持つ1つのDIVにそれらの両方を配置しました。このコードで間違って

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

いただきました：ここにHTMLコードはありますか？私はDIVをクリアしようとしましたが、動作しませんでした。また、display-inlineパラメーターを拡張するために適用しようとしましたが、解決策はありませんでした。実際には、h2 BGの色と同じ色を持つ同じ行にスパンを配置したいのですが、可能かどうかわかりません。任意の提案はspan要素の必要性が実際に存在しない、これはあなたが始めるのに役立つかもしれません:)

Answer 1

素晴らしいことだ（あなたはそれのためにいくつかの他の用途を持っていない限り）

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

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