アラートとボタン付き垂直整列ヘッダー

Question

タイトルヘッダー、アラート、および2つのボタンを垂直に整列しようとしています。 私の目標は、内容が短くてもアラートの幅を大きくすることです。私の問題は、私がspanをアラートに使用しているので、display: inline-blockをそのスタイルに入れる必要がありますが、それを行うことによって、ヘッダーとの整列がずれることになります。ところで、私はブートストラップを使用しています。

は、ここで私は起こるしたいもののイメージがあります：

ここに私のHTMLです：

<h1> 
    <span>This will be a very long title</span> 
    <span class="alert custom"> 
     This is notification! 
    </span> 
    <span class="pull-right"> 
     <button class="btn button-round">O</button> 
     <button class="btn button-round">X</button> 
    </span> 
</h1> 

は、ここに私のCSSです：

.button-round { 
    border-radius: 50%; 
    color: white; 
    background: green; 
} 

.custom{ 
    font-size: 12px; 
    vertical-align: middle; 
    background: green; 
    color: white; 
} 

は、ここに私のjsfiddleです現在のコード： JSFiddle of my current code

Answer 1

は、Flexを使用する必要があり、これを容易にする：

.button-round { 
 
    border-radius: 50%; 
 
    color: white; 
 
    background: green; 
 
    margin: auto 
 
} 
 

 
.custom { 
 
    font-size: 12px; 
 
    vertical-align: middle; 
 
    background: green; 
 
    color: white; 
 
    /* added */ 
 
    flex: 1; 
 
    margin: 0 0.25em; 
 
} 
 

 
h1 { 
 
    display: flex; 
 
} 
 

 

 
/* end added */

<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--> 
 
<h1> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <span>This will be a very long title</span> 
 
    <span class="alert custom"> 
 
    This is notification! 
 
</span> 
 
    <span class="pull-right"> 
 
    <button class="btn button-round">O</button> 
 
    <button class="btn button-round">X</button> 
 
</span> 
 
</h1>

https://jsfiddle.net/fczbe58L/1/