Почему кнопка не сдвигает текст?

Рейтинг: 3Ответов: 2Опубликовано: 25.03.2011

HTML:

<div>
    <form>
        <textarea name="message" cols="40" rows="5"></textarea>
        <input type="submit" value="submit">
    </form>
</div>

Текст

CSS:

div {
    width: 300px
}

textarea {
    display: block;
}

input {
    float:right;
    display: block;
}

alt text

Почему кнопка submit не сдвигает текст, который находится ниже? Она ведь часть блока div.

css html вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

Потому что у неё прописано свойство float: right;

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

Добавлено. Если ж вы желаете сделать так, чтобы кнопка была справа, а текст - снизу, то нужно создать контейнер для кнопки и применить к нему CSS-свойство text-align. Оно определяет, по какой стороне будут выровнены все дочерние элементы контейнера.

▲ 2

HTML:

<div id="main">
    <form>
        <textarea name="message" cols="40" rows="10"></textarea>
        <div id="other" align="right"><input type="submit" value="submit"></div>
    </form>
</div>

Текст

CSS:

div {
    width: 350px
}

alt text

Вот рабочий вариант, float, видимо, работает не так, как вы хотите, тут можно почитать как он работает, а вообще используйте align.