Как переместить кнопку вправо?

Question

У меня есть приложение here Если пользователь нажимает кнопку «плюс», он отображает модальное окно.

Проблема в том, что я хочу, чтобы кнопка закрытия появлялась в правой части окна, в той же строке, что и заголовок «ПРЕДЫДУЩИЕ ВОПРОСЫ». Но, похоже, он совсем не движется вправо. Что я делаю не так?

Ниже приведен код:

HTML:

<div class="previouslink"> 
<h1>PREVIOUS QUESTIONS</h1> 

<button type="button" id="close" onclick="return closewindow();">Close</button> 
</div> 

CSS:

#close{ 
    float:right; 
    display:block; 
    margin-right:0px; 
    clear:left; 
} 

Answer 1

В вашем файле QandATableStyle2.css есть ошибки. Удалить ; после:

.previouslink{ 
display:none; 
}; 

И он должен работать нормально. ; знак предотвращает определение из loading.

Answer 2

Как H1 является блок-элемент он занимает всю ширину линии, на которой она стоит , Это означает, что элементы, которые следуют за элементом H1, не могут находиться в одной строке, даже если к ней применяется свойство float.

Вы можете либо добавить

position: absolute; 
top: 0; 
right: 0; 

к элементу. Или добавьте отрицательный запас для этого элемента. Кроме того, также можно добавить float: left; к элементу H1. Помните, что это может вызвать определенные проблемы с плавающими и прерываниями строк.

Также можно добавить -элемент до H1. Это будет препятствовать тому, чтобы H1 занимал все пространство в своей строке, но будет распознавать закрытый элемент с его пространством.

Answer 3

Вы можете применить display: inline; к элементу <h1>, что позволит отображать <button> (также inline) в той же строке.

Обратите внимание, что вам, скорее всего, понадобится стилизовать следующий элемент до clear: both;, если вы не хотите, чтобы в пространство между заголовком и кнопкой попадало следующее содержимое.

См. this example.