Как разместить кнопки в одной и той же линии, в центре и не слишком близко друг к другу?
Я хочу разместить их в одной строке, рядом друг с другом, но не слишком далеко друг от друга.
На данный момент это то, что у меня есть
Я пытаюсь дать им класс, pull-left и pull-right Это то, что они выходят
Они слишком далеко. ��
Я хочу, чтобы они выглядели примерно так. Возможно, с вертикальной линией посередине. Я не уверен, как это сделать.
Вот мой HTML-код
Что мне делать, чтобы приблизиться к тому, что я хочу?
- У вас было 2 <p> теги, объединив их в 1.
- Поместите их в <p> чтобы они были в той же строке, что и вы.
- Добавить style=»text-align:center;» в тэг <p> .
- Добавьте кучу между ними для поддержания пространств
- Для вашего вертикального трубопровода просто сделайте это |
Дайте класс на <p> Пример: <p >
Я бы также предложил использовать лучшую семантику для создания кнопок.
Оберните p теги контейнером, а затем вы можете добавить display: inline-block и margin . JSFIDDLE
Кнопки счетчиков посетителей в одну строку
В данной статье я покажу Вам, как можно выставить кнопки рейтинга (статистики) сайта в одну строку при помощи нескольких тегов HTML. Данная штука применима к любым сайтам и любому контенту: тексту, картинкам, видео и прочему. При необходимости, Вы можете использовать данный код в статьях и записях. На примере моего сайта Вы увидите, как можно выставить в «подвале» сайта в одну строку текст, счетчик Mail.ru и счетчик посещений от LiveInternet.
К написанию данной статьи меня подтолкнул один из читателей блога, который задал свой вопрос, когда я тестировал Онлайн консультанта для сайта.
[infob]Прежде всего, перед тем, как приступить к практической части, не забывайте делать резервную копию файлов с которыми будете работать.[/infob]
Для тех, кто еще не понял о чем пойдет речь, я сделал скриншот (клик для увеличения):
Данная конструкция находится в самом низу сайта mojwp.ru. Здесь мы видим слева текст, а справа 2 счетчика (Mail.ru и LiveInternet). Все находится на одном уровне и не занимает много места. К тому же это более красиво, чем несколько кнопок друг под другом с большими промежутками между ними.
Чтобы быстро сделать сайт, либо реализовать подобное, потребуются некоторые знания html, а также мои подсказки. Для наглядности покажу 2 способа, как реализовать подобное (в результате будет как на данном сайте).
Способ №1: используем div.
Именно таким способом реализовано у меня. Если у Вас есть хоть начальные знания по применению контейнеров div, то больших сложностей данная процедура не вызовет. Вот мой код:
Все это записано в одну строку в файле footer.php (так называемый «подвал» сайта).
- float:left — выравнивание по левому краю.
- padding: 0 0 5px 5px — внутренний отступ: сверху справа снизу слева
- float:right — выравнивание по правому краю
Если у Вас количество кнопок больше, то достаточно добавить необходимое количество контейнеров div. Так же можете поэкспериментировать с отступами, т.е. значениями. Вместо нулей достаточно записать количество пикселей и добавить их обозначение px.
Способ №2: при помощи HTML
Если Вы собираетесь развиваться в области «блоггинга», то просто необходимо знать азы HTML. Для этого погуглите и почитайте соответствующую литературу. Могу Вас уверить, что все успешные блоггеры начинали именно так. Я так же периодически заглядываю в справочник http://htmlbook.ru/html/, когда необходимо освежить память.
Чтобы сделать аналогичное тому, как было показано в первом способе, но уже на HTML, нам потребуется следующая конструкция (таблица), которую так же помещаем в нужно место:
Теперь все будет выстроено в одну строку. Однако при таком коде, ячейки будет идти друг за другом, т.е. без отступов. Чтобы привести все в немного красивый вид, необходимо добавить следующее:
В данном коде был добавлен параметр ширины (width) как для всей таблицы, так и для двух ячеек, куда помещены мои счетчики.
- tablе width=100% обозначает, что таблица займет всю ширину области (в данном случае «подвала»). Если Вам нужно разместить лишь на какой-то части области, то выставляем необходимый процент.
- td width=88px обозначает, что данная ячейка будет шириной 88px. Почему именно эта цифра? Если посмотреть ширину картинки, то она будет именно такой. Т.е. указывая цифру 88 мы ограничиваем ячейку, что в купе с шириной таблицы 100% и оставшимися ячейками, прижмет необходимую мне к правому краю.
Как Вы заметили, ширину (width), можно указывать в % и в пикселях (px). Вы сами выбираете, как будет лучше смотреться.
Применять данные способы можно не только для описанного случая, но для других целей. Просто помните о нем и Вы всегда найдете то, что нужно выставить в одну строку (банеры, блоки текстов, видеоролики, контекстные ссылки и прочее).
К примеру: Ваш сайт принимают в Rotaban — биржа баннерной рекламы. Чтобы разместить 2 банера 468*60 пикселей в один ряд в шапке сайта (или над ней), Вам просто необходимы будут подобные знания, изложенные в статье. А размещая два блока рекламы — Вы увеличиваете свою прибыль и не сильно «напрягаете» посетителя сайта слишком длинным рекламным блоком.
Вот и все. Будут вопросы — пишите в комментариях, либо в тикеты. Но, прежде чем писать, попробуйте найти ответ на свой вопрос в справочнике, ссылка на который дана чуть выше.
Как разместить две кнопки в одной строке в html коде?
Две кнопки для одной формы
Здравствуйте. Допустим у меня есть форма: <form name="MyForm".
Как разместить два элемента в одной строке?
на сайте ..есть логотип . логотип размещается в верхнем левом краю. на том же уровне только в.
Как удалить две кнопки действия в коде сайта?
Всем привет, подскажите где в конде ннайти свойства страницы чтоб убрать даные переходы? Благодарю.
Две кнопки разместить в правом углы панели
В конструкторе формы пытаюсь сделать следующее: FlowLayoutPanel itemsGridHeader = new.
Как сделать кнопки в html в строчку
У всех социальных сетей есть свои собственные кнопки, которые позволяют быстро поделиться новостью на друзьями или просто для того, чтобы показать свой интерес к прочитанному. Не все кнопки похожи, но благо то, что на многих популярных соц. сетях есть настройки для таких кнопок. Выбрав для всех одинаковую высоту, Вы сможете поместить кнопки в одну строку. Конечно, Вы можете использовать оригинальные иконки социальных сетей, по нажатию на которые будут открываться окна для отправки ссылки в профиль. Но предпочтительней использовать «родные» кнопки. Они, в основном, не открывают дополнительные окна, что ускоряет отправку ссылки. В социальных сетях ВКонтакте, Facebook, Twitter, Google Plus, Мой мир и Одноклассники есть возможность выбрать высоту 20 пикселей. Это компромисс. Ниже будет показана пошаговая инструкция, как создать свои кнопки, а пока посмотрите на специальный код, который позволит осуществить вывод кнопок соц. сетей в одну строчку.
Код HTML
Вместо названия сетей необходимо вставить полученные коды кнопок. Ниже читайте о том, как их получить.
<div style=»width:150px;overflow:hidden;float:left»>
ВКонтакте
</div>
<div style=»width:105px;overflow:hidden;float:left»>
Twitter
</div>
<div style=»width:135px;overflow:hidden;float:left»>
Facebook
</div>
<div style=»width:70px;overflow:hidden;float:left»>
Google Plus
</div>
<div style=»width:230px;overflow:hidden;float:left»>
Мой Мир и Одноклассники
</div>
Получить кнопку ВКонтакте
Кнопки в одну строку должны иметь одну и ту же высоту. Получить виджет можно здесь. Из вариантов следует выбрать «Кнопка с миниатюрным счётчиком». Высоту выбираем 20px. Копируем код, вставляем вместо названия «ВКонтакте» в коде выше.
Кнопка Твитнуть
Перейдите на страницу получения кнопочки. Тут она сразу имеет нужный нам формат. Копируем код, вставляем в нужное место.
Facebook Like
Получить код можно на соответствующей странице. Ширину нужно взять 200. Кнопку для отправки скрыть (снять галочку), вариант выбрать простой со счетчиком.
Google +1
Кнопку от Google Plus ставьте обязательно. Сгенерировать код можете здесь. Размер возьмите второй, и вариант со счетчиком.
Нравится и класс
Это последние кнопки в строке. Вот страница. Главное, оставьте размер второй. Текст на кнопках можно убрать вообще, это сэкономит место значительно.
Как a одну строку вставить кнопки?
Здравствуйте. Подскажите пожалуйста как выровнять в одну строку все кнопки соц сетей. Не могу понять где ошибка.
Сам код:
<a href=»httpstwitter.com/share» data-via=»blogmarketologa» data-lang=»ru»>Твитнуть</a>
<div ><script type=»text/javascript» src=»https://htmlforum.dev/topic/46208-%D0%BA%D0%B0%D0%BA-a-%D0%BE%D0%B4%D0%BD%D1%83-%D1%81%D1%82%D1%80%D0%BE%D0%BA%D1%83-%D0%B2%D1%81%D1%82%D0%B0%D0%B2%D0%B8%D1%82%D1%8C-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8/httpplatform.link.%20/script><script%20type=»in/share»></script></div>
Стили:
В итоге последняя кнопка съезжает на строчку вниз. А должны быть в один ряд и от центрованы.
Подскажите пожалуйста, очень нужно красоту навести.
Ссылка на комментарий
Поделиться на других сайтах
4 ответа на этот вопрос
- Сортировать по голосам
- Сортировать по дате
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
CSS: элементы в строку
Верстка
По умолчанию все блочные элементы в HTML выстраиваются в ряд друг под другом и занимают всю ширину страницы. И тут же у новичков возникает вопрос как расположить, с помощью CSS элементы в строку. Существует 2 наиболее популярных способа это сделать.
- Использовать display: inline-block
- Использовать float: left/right
Рассмотрим каждый из них.
CSS свойство display: inline-block
Данное свойство определяет элемент как строчно-блочный, другими словами выстраивает элементы в строку. Важно понимать как работает это свойство, поэтому давайте рассмотрим на практике. Сделаем 3 блока внутри родительского и расположим их в одну линию. Вот что получилось:
HTML разметка выглядит следующим образом:
Как видно на изображении я добавил свойства background и border, чтоб наглядно видеть происходящее на странице. Обязательно задаем всем элементам height иначе оно будет равно 0 по умолчанию и мы ни чего не увидим. Трем блокам .child задаем display: inline-block и width: 30%.
ВНИМАНИЕ! Если не установить свойство width, блоки примут по умолчанию значение ширины всей страницы и от свойства display не будет ни какого толку.
Важно понимать что элементы встанут в одну линию если для них обоих (или более) будет задано свойство display: inline-block при этом между ними не будет других элементов, с отличным от данного, свойством. Если попробуем изменить класс для блока .child находящегося по середине, тем самым убрав все стили, то увидим что все элементы выстроились в ряд.
CSS свойство float: left или float: right
Аналогичное по результату inline-block, но отличное по принципам работы свойство float — в переводе с английского означает — обтекание. Давайте попробуем убрать из предыдущего примера
Как сделать с помощью css блоки в линию?
От автора: я приветствую вас. Необходимость представить несколько блоков на веб-странице в одну линию — очень частая задача, которая возникает перед верстальщиками. Она возникает при верстке практически каждого шаблона, поэтому всем нам в любом случае нужно знать и применять основные способы изменения поведения блоков.
Прежде чем мы посмотрим самые распространенные приемы, хотел бы вспомнить немного теории. Элементы веб-страницы делятся на блочные и строчные. И разница между ними очень проста — строчные могут располагаться в одну строку, а блочные — нет. Конечно, на этом различия не заканчиваются, но это основное отличие. Уже у блоков могут быть отступы сверху и снизу (у строчных — нет), а также к ним можно применять больше свойств.
Основные способы выстроить в css блоки в ряд
Есть мы не будем ничего усложнять, есть 3 основных способа:
Преобразовать блоки в строчные элементы. При этом блочные свойства теряются, поэтому этот вариант практически никогда не используется
Сделать нужные элементы блочно-строчными. Это специальный тип, при котором элемент сохраняет свои свойства, но в то же время позволяет другим блокам расположиться рядом.
Изучите Веб-вёрстку с нуля
Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!
Сделать элементы плавающими с помощью свойства float.
На этих вариантах остановимся. Флексбокс, табличное отображение и другие моменты рассматривать не будем. Итак, пускай у нас есть 3 подзаголовка.
Естественно, все css-свойства нужно прописывать в отдельном файле (style.css), который нужно подключить к html-документу. В этот файл я запишу минимальный стиль, чтобы просто было видно наши подзаголовки.
Вот они на странице:
Есть они ведут себя как блоки. Кадый располагается на своей строке, между ними есть отступы. При желании также вы можете задать какие-угодно внутренние отступы и вообще сделать что угодно.
Преобразуем в строки и сразу добавим внутренние отступы. Для этого селектору h3 нужно добавить такие свойства:
Как видите, отступы применились не совсем корректно, это как раз потому, что мы имеем дело со строками. Если изменить отображение на блочно-строчное, отступы добавятся корректно. Для этого всего лишь меняем значение свойства:
Есть 2 основные проблемы, которые возникают при использовании этого приема. Первая — это минимальный отступ. Образуется он из-за того, что в коде между блоками есть один пробел, который и образует этот отступ. Если эта проблема нуждается в решении, есть 2 основных варианта:
В html расположить код нужных блоков в одну линию без пробелов
Проставить отрицательный внешний отступ справа -4 пикселя. Именно столько занимает один пробел.
Вторая проблема — при разной высоте элементов могут возникать проблемы с отображением. В общем, наилучший вариант — плавающие блоки. Вместо display: inline-block пишем вот что:
И все наши заголовки третьего уровня теперь будут прижиматься к левому краю. Соответственно, также можно прижать их и к левому. При использовании этого приема вышеописанных проблем не возникает изначально.
Единственное, за чем вы должны следить в таком случае — отмена обтекания. Следующему блоку после плавающих нужно поставить свойство clear:both, чтобы он не пытался обтекать эти блоки, а расположился ниже, как и положено.
Блоки в линию с использованием фреймворка
Сразу скажу, что если вы собираетесь использовать любой нормальный css-фреймворк (например, Bootstrap) то там все еще гораздо проще. Весь css-код, отвечающий за расстановку элементов, уже написан и вам останется лишь задан правильные классы. Для этого достаточно изучить систему сетки, и вы сможете делать многоколоночные адаптивные шаблоны без особых трудностей. По крайней мере, это будет значительно проще, чем при написании css с нуля.
Еще одна проблема написания кода с нуля возникает как раз когда вам нужен адаптивный дизайн. Конечно, его можно реализовать самостоятельно, владея медиа-запросами, но это будет намного сложнее, если у вас сложный шаблон.
Например, когда у вас на больших экранах должно быть 4 колонки, на средних — 3, а на мобильных телефонах — 2. С помощью таких фреймворков, как Bootstrap, а точнее с помощью его сетки, реализовать подобное — дело буквально нескольких минут.
Плавно переводя тему на фреймворк Bootstrap, в очередной раз отмечу, что если перед вами стоит задача сверстать сложный адаптивный шаблон, то просто грех не воспользоваться сеткой. Для этого даже не обязательно подключать полную версию фреймворка – его можно кастомизировать и остановить там только то, что действительно вам нужно.
Изучите Веб-вёрстку с нуля
Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!
Научиться работать с фреймворком вы сможете с помощью нашего платного курса. Там объясняется и теория, но самое главное – есть практика. Вы сверстаете 3 адаптивных шаблона и получите отличный опыт, который позволит верстать сайты на заказ или для себя. А если вы хотите бесплатно ознакомиться с преимуществами и возможностями фреймворка, предлагаю вам просмотреть нашу серию статей по Bootstrap, а также бесплатный мини-курс по верстке простого макета. Желаю вам успехов в верстке и сайтостроении в целом.