line up button - кілька рядків тексту, потім кнопка - html, css

У мене є HTML-сторінка з кількома рядкамимістить текст, потім кнопку. Текст різної довжини, але я хотів би css автоматично додавати пробіл між кожним фрагментом тексту і кнопками, щоб кнопки вирівнювалися вертикально.

Наприклад:

<p>Complete part one: <button id="one" type="button">One</button></p>
<p>Now fill in section two: <button id="two" type="button">Two</button></p>

Виглядає як:

Тоді як я б хотів, щоб він вишикувався.

Відповіді:

Просто додайте у свій CSS

button{
float:right;
}

Якщо ви бажаєте обмежити ширину "ліній", просто зробіть, наприклад:

p{
width:400px; /* or similar to limit the width */
}

Ви можете просто додати кнопку css, як описано вище. але краще, якщо у визначити інший контейнер css клас

.Container{
width:200px;
}

і покласти вашу html сторінку всередині it.something, як це

div class = "Container">
your code here
</div>

І зробити це виглядати краще це і на мій погляд, краще, якщо ви використовуєте tab div замість абзацу, щоб визначити ширину.