Başlığın yanında nasıl bir düğme yerleştirebilirim?

Question

float: right;'u kullanmayı düzeltebilirdim, ancak düğmenin div dışında görünmesini sağlar. Bunu nasıl çözebilirim?

HTML

<div id="main"> 
    <h1>Title</h1> <button>Button</button> 
</div> 

CSS

#main { 
    width: 200px; 
    border: 1px dotted black; 
} 
h1 { 
    margin: 0; 
} 
button { 
    float: right; 
} 

JSFiddle

Answer 1

... h1display: inline-block senin elemanlar aynı satır işgal etmek olanak vermek için ver

#main { 
 
    width: 200px; 
 
    border: 1px dotted black; 
 
} 
 
h1 { 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 
button { 
 
    float: right; 
 
}

<div id="main"> 
 
    <h1>Title</h1> <button>Button</button> 
 
</div>

Answer 2

böyle deneyin:

<div id="main"> 
    <h1> Title <button>Button</button></h1> 
</div> 

JSFIDDLE DEMO

veya display:inline kullanabilirsiniz böylece yan-yana görünür.