Bazaprogram.ru

Новости из мира ПК
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Увеличить расстояние между элементами списка css

как сделать отступы между тегом li

20.05.2013, 14:23

Как сделать отступы между ссылками?
Здравствуйте. Имеется следующий код:

Сделать отступы между li
Всем привет! Ситуация следующая: я сделал сайт free-wemaster.ru. Хочу сделать меню. В самом верху.

Необходимо сделать отступы между пунктами меню и реализовать hover-эффект
Доброго дня уважаемые, крутой у Вас форум! В общем я начал изучать верстку сайта и вот у меня такая.

20.05.2013, 14:372
HTML5
20.05.2013, 15:23 [ТС]3
20.05.2013, 15:484

тогда можно так попробовать:

Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта.

normal Расстояние между строк вычисляется автоматически.
inherit Наследует значение родителя.

20.05.2013, 18:00 [ТС]5
20.05.2013, 18:016
20.05.2013, 18:10 [ТС]7

представьте что у вас 5 пунктов меню li у них черный беграунд все черное такое при черное ))). вот а мне нужно чтоб между пунктами появился белый просвет сверху и снизу. а то что вы предлагаете увеличит или уменьшит расстояние между буквами типа padding

Добавлено через 5 минут
вот я создал тему но немного не правильно выразил в ней свои мысли но тут все подробно что я хочу получить и скрин есть www.cyberforum.ru/html5/thread870114.html

20.05.2013, 18:178
20.05.2013, 18:26 [ТС]9

вот я хотел сделать див а в нем вложенный див а в css. сделать position:relative; и отступы с верху и с низу. и чтоб проведений срабатывал вложенный див. Другим словами я хотел сделать прямоугольник в прямоугольнике и тот прямоугольник который вложенный был меньше сверху и с нижу на 2px к его классу сделать :hover чтоб при наведение менял цвет. Третий день бьюсь без результатов ((((.

Добавлено через 3 минуты
ссылками я сам я там дисплей блок сделаю, что типа .myclass ul li а:hover < тут дисплей блок; меняю цвет ссылок; >и все

Поля и отступы CSS — пояснение на примере четырех HTML-элементов

Свойство HTML margin используется для добавления отступа или разрыва между различными элементами. Свойство padding используется для добавления пространства между содержимым и границей ( рамкой ) указанного HTML-элемента .

Разницу между полем и отступом можно увидеть на следующем рисунке:


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

Посмотреть демо-версию и код

У нас есть три элемента div . Первые два — со свойством HTML margin , а третий — со свойством padding . Расстояние между элементами div — это margin , а пространство между текстом внутри третьего элемента div и линией его границы — это padding .

Синтаксис CSS padding и margin

Синтаксис, который используется для единичного объявления свойства CSS margin :

Этот код задает отступы во всех направлениях: сверху, снизу, слева и справа. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:

  • 10px — отступ сверху;
  • 20px — отступ справа;
  • 30px — отступ снизу;
  • 40px — отступ слева.

Также можно установить margin left HTML и другие направления отдельно:

Примечание: Можно использовать для определения отступа px , pts , cm и т.д.

Синтаксис свойства CSS padding

Свойство padding можно задать с помощью единичного / сокращенного объявления или используя отдельное объявление, а для каждого направления.

Единичное объявление с одним значением:

Для каждого направления одиночным объявлением:

Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin .

Для каждого направления в отдельности:

Пример для установки полей и отступов в HTML-списке

Во вступительной части я показал свойства margin и padding , используемые в элементе div . В этой демо-версии я создал список с помощью пунктов меню, которые являются ссылками. Список размещается внутри элемента div . Он содержит пункты меню в виде гиперссылок.

Список задается и другими свойствами CSS , но без использования свойств HTML margin и padding он будет выглядеть так:


Посмотреть демо-версию и код

Добавив поля 10px для ссылок внутри

    :

мы получим следующий вид:


Посмотреть онлайн демо-версию и код

Свойство padding добавило пространство между содержимым и границей каждой ссылки. Укажите отступ величиной в 2 пикселя в классе ссылки, и получите следующий вид:


Посмотреть онлайн демо-версию и код

Весь класс для ссылок внутри элемента

    будет следующим:

Демонстрация полей на примере HTML-таблицы

Ниже приводится пример использования свойства padding в HTML-таблице . Я создал таблицу с несколькими строками.

Для таблицы заданы стили с помощью различных свойств CSS . Сначала посмотрите, как выглядит таблица без применения свойства padding :


Посмотреть демо-версию и код

Добавив поля, мы получим таблицу, которая будет выглядеть следующим образом:


Посмотреть демо-версию и код

Ниже приводится код стилей, которые используются для

. Весь код можно увидеть, перейдя по ссылке выше:

Пример использования полей и отступов с элементом form

Свойства margin padding HTML также можно применять для элементов формы: текстовых полей, кнопок и т.д.

Свойство padding , примененное к текстовому полю, задает пространство между курсором внутри текстового поля и его границей. margin добавляет отступы между различными текстовыми полями или другими элементами формы.

Чтобы стало понятнее, я создам форму и покажу разницу между полями с использованием свойств margin и padding и без. Первоначальный внешний вид формы без применения свойств margin и padding :


Добавив поля к классу текстовых полей и классу кнопки btn , мы получим форму, выглядящую следующим образом:

Поля для текстовых полей:

Поля для кнопки:


Посмотреть демо-версию и код

Чтобы увеличить или уменьшить отступы между текстовыми полями, используйте свойство HTML CSS margin . В данной демо-версии я использовал отрицательное значение для уменьшения расстояния между полями.

Поля формы будут выглядеть следующим образом:


Посмотреть демо-версию и код

После использования отрицательного значения в HTML margin расстояние между текстовыми полями уменьшилось на 3 пикселя.

Использовав свойство padding , мы увеличили расстояние между курсором внутри текстового поля и линией границы, которое задается другими свойствами. Теперь поле выглядит гораздо лучше.

Для кнопки “ Save ” мы также применили свойство padding :

которое используется для выравнивания текста во всех направлениях.

Данная публикация представляет собой перевод статьи « CSS padding and margin – Explained with 4 HTML elements » , подготовленной дружной командой проекта Интернет-технологии.ру

Отступы во вложенных списках в HTML / CSS

Я начал использовать Twitter Bootstrap, что полезно для меня (как программиста), чтобы получить приличный сайт без необходимости писать много CSS.

Однако что-то сводит меня с ума. У меня есть вложенный список, как

Но первый и второй уровень этого списка NOT получают отступы по-разному (т. е. они выравниваются друг с другом слева)

В обычных html вложенных списках более глубокие подсписки отступают больше. Но что-то в таблице стилей должно быть выключает это. Как мне найти то, что управляет этим? Я не вижу атрибута CSS «list indent» для li-элементов ни в одной документации.

6 Ответов

Просто используйте Firebug в FF или Chrome dev-tools : щелкните правой кнопкой мыши на вашей цели и элементе select inspect . Вы можете визуально и текстуально проверить свойства CSS, чтобы увидеть, что вызывает коллапс.

Вы, вероятно, хотите правило, как

Просто чтобы добавить к ответам выше: padding-left будет отступать от слов, но не от точки маркера, в то время как margin-left также будет отступать от точки маркера.

У меня была такая же проблема, как и у тебя.

Есть правило в type.less, которое отменяет отступ для списков:

В конце концов я отменил это правило:

Отступы во вложенных списках теперь вернулись.

Вы хотите установить padding-left :

будет отступать каждый ли 1ем. Поскольку внутренние lis уже смещены от внешних lis, он должен делать то, что вы хотите.

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

CSS, чтобы применить его: ul

Используя Bootstrap, вы можете сделать это, написав код следующим образом. Просто вставьте свой JSP или HTML и протестируйте его. Вы можете перейти по этой ссылке для получения дополнительной информации.

Похожие вопросы:

Это Fiddle http://jsfiddle.net/kaxjL3La / показывает мою попытку адаптировать шаблон общего обновления D3 к использованию вложенных списков

    HTML. Я считаю, что усложняет эту.

У меня есть список: l = [[‘a’, 10, 30], [‘b’, 34, 89], [‘c’, 40, 60],[‘d’,30,20]] где первый элемент внутри каждого подсписка-это имя, а два других числа-это метки (sub1 и sub2) Вложенные списки.

a=[int(i) for i in input().split()] b=[] for i in range(a[0]): x=[int(i) for i in input().split()] b.append(x) print(b) c=[] for j in range(len(b)): c.append(max(b[i])) print(b[0]) print(c) 2 1 3 45.

У меня есть список диктов, поступающих из файла yaml. Каждый дикт имеет вложенные списки диктов, которые я могу прочитать, как показано ниже: import yaml stream =.

Я пытаюсь получить индекс элемента во вложенных списках в python — например [[a, b, c], [d, e, f], [g,h]] (не все списки имеют одинаковый размер). Я уже пробовал использовать strand_value= [x[0] for.

Я новичок в Ocaml и пишу код для замены элементов во вложенных списках Ocaml. Мой код выглядит следующим образом: type ‘a sexp = S of ‘a | L of ‘a sexp list Моя функция подстановки (она заменяет все.

Есть ли хорошая возможность найти объекты внутри списков nestet? Может быть, что-то из гуавы, что поддерживает следующее: class PriceInfo() < List

types; > class PriceType() <.

Я пытаюсь построить простую игру Tic-Tac-Toe в python, чтобы проверить победу, я использую вложенный цикл для поиска совпадения во вложенных списках. По какой-то причине мой код будет искать только.

В настоящее время я создаю рекурсивный цикл в R, где я должен отслеживать, насколько глубоко я нахожусь во вложенном списке. Однако я столкнулся с проблемами при подсчете во вложенных списках. Вот.

У меня есть этот список: mylist = [[‘A’,5,6,7],[‘C’,3,90,5.3],[‘G’,5,4,6]] Как я могу получить логарифм к базе 2 в таких вложенных списках? Это мой подход: from math import log print([log(x,2) for x.

Читать еще:  Как объединить ячейки в css
Ссылка на основную публикацию
Adblock
detector