Кордон надто широкий через маржу

У мене є вбудований неурядовий список як навігаційна панель у моєму html. Я хотів показати верхній межі, коли вирівнюється на елемент li. Але коли я додаю маржу або пробіли, щоб зробити пробіл між послідовними елементами, межа занадто широка. Я не хочу додавати пробіли в html. Чи є якийсь інший шлях? Я намагався вставити порожній розділ з визначеною шириною, але це не спрацювало. Найкращий результат, який я міг би отримати, - це тексту-декоративне оформлення, але, на жаль, мені потрібний інший колір, ніж чорний. Ось мій код:

LI
{
display: inline;
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.2em;
padding-left: 30px;
}
LI:hover
{
border-top: 1px solid #000000;
}

і HTML

  • link 1
  • link 2
  • link 3
  • link 4


0
Будь ласка, опублікуйте свій HTML та CSS.
додано Автор j08691, джерело
Будь ласка, опублікуйте свій HTML та CSS.
додано Автор j08691, джерело
Я б рекомендував плавати всі елементи всередині списку і зробити його відображатися у вигляді блоків. Внутрішні списки важко розшифровувати часом, однак, розмістіть свій код. Давайте це побачимо
додано Автор ProfileTwist, джерело
Я б рекомендував плавати всі елементи всередині списку і зробити його відображатися у вигляді блоків. Внутрішні списки важко розшифровувати часом, однак, розмістіть свій код. Давайте це побачимо
додано Автор ProfileTwist, джерело
Я б рекомендував плавати всі елементи всередині списку і зробити його відображатися у вигляді блоків. Внутрішні списки важко розшифровувати часом, однак, розмістіть свій код. Давайте це побачимо
додано Автор ProfileTwist, джерело
Я додав мій код, можливо, тепер ви побачите легше рішення.
додано Автор user2525842, джерело
Я додав мій код, можливо, тепер ви побачите легше рішення.
додано Автор user2525842, джерело
Я додав мій код, можливо, тепер ви побачите легше рішення.
додано Автор user2525842, джерело

6 Відповіді

Застібка розширює ширину ваших елементів, а маржа створює порожній інтервал після і перед елементом. Ви можете дізнатись більше про Box Model .

Я скоригував свій код, щоб краще підходити до вашої справи:

HTML:

  • link 1
  • link 2
  • link 3
  • link 4

CSS:

ul a {
    text-decoration: none !important; //Removes default underline form link
}

li {
    display: inline;
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding-left: 0.2em;//Letter spacing is making borders to extend slightly more on the right. This makes borders extend similarly on the left
    padding-top: 2px; //To push top border slightly higher, so that top and bottom is the same distance from your text
    margin-left: 30px;
    text-align: center;
    border-top: 1px solid transparent; //Stops navigation from extending on :hover
}

li:hover {
    border-top: 1px solid #000; //border top on :hover
}

FiddleJS: http://jsfiddle.net/kGN69/2/

1
додано
Це не впливає на ширину ваших елементів, однак, це хороша практика зробити це, якщо ви будете малювати кордон на: стан наведення. Якщо ви не матимете цієї прозорої кордону, веб-переглядач буде натискати ваш товар на 1 піксель (товщина кордону), коли вирівнюється, тому що йому доведеться виділити додатковий простір над вказаним елементом. Це не вплине на ваш код, оскільки ви оголосили display в inline , але це буде на inline-block або block або якщо ви вирішили додати кордони з боків. Живий приклад без і з прозорими кордонами: jsfiddle.net/kGN69/5 vs jsfiddle.net/kGN69/6
додано Автор Ninetou, джерело
Дуже дякую! Це саме те, що мені потрібно. Але щоб краще зрозуміти - чому перш за все потрібно зробити прозору кордон? Як це впливає на його ширину: наведіть курсор на?
додано Автор user2525842, джерело

Застібка розширює ширину ваших елементів, а маржа створює порожній інтервал після і перед елементом. Ви можете дізнатись більше про Box Model .

Я скоригував свій код, щоб краще підходити до вашої справи:

HTML:

  • link 1
  • link 2
  • link 3
  • link 4

CSS:

ul a {
    text-decoration: none !important; //Removes default underline form link
}

li {
    display: inline;
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding-left: 0.2em;//Letter spacing is making borders to extend slightly more on the right. This makes borders extend similarly on the left
    padding-top: 2px; //To push top border slightly higher, so that top and bottom is the same distance from your text
    margin-left: 30px;
    text-align: center;
    border-top: 1px solid transparent; //Stops navigation from extending on :hover
}

li:hover {
    border-top: 1px solid #000; //border top on :hover
}

FiddleJS: http://jsfiddle.net/kGN69/2/

1
додано
Це не впливає на ширину ваших елементів, однак, це хороша практика зробити це, якщо ви будете малювати кордон на: стан наведення. Якщо ви не матимете цієї прозорої кордону, веб-переглядач буде натискати ваш товар на 1 піксель (товщина кордону), коли вирівнюється, тому що йому доведеться виділити додатковий простір над вказаним елементом. Це не вплине на ваш код, оскільки ви оголосили display в inline , але це буде на inline-block або block або якщо ви вирішили додати кордони з боків. Живий приклад без і з прозорими кордонами: jsfiddle.net/kGN69/5 vs jsfiddle.net/kGN69/6
додано Автор Ninetou, джерело
Дуже дякую! Це саме те, що мені потрібно. Але щоб краще зрозуміти - чому перш за все потрібно зробити прозору кордон? Як це впливає на його ширину: наведіть курсор на?
додано Автор user2525842, джерело

Застібка розширює ширину ваших елементів, а маржа створює порожній інтервал після і перед елементом. Ви можете дізнатись більше про Box Model .

Я скоригував свій код, щоб краще підходити до вашої справи:

HTML:

  • link 1
  • link 2
  • link 3
  • link 4

CSS:

ul a {
    text-decoration: none !important; //Removes default underline form link
}

li {
    display: inline;
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding-left: 0.2em;//Letter spacing is making borders to extend slightly more on the right. This makes borders extend similarly on the left
    padding-top: 2px; //To push top border slightly higher, so that top and bottom is the same distance from your text
    margin-left: 30px;
    text-align: center;
    border-top: 1px solid transparent; //Stops navigation from extending on :hover
}

li:hover {
    border-top: 1px solid #000; //border top on :hover
}

FiddleJS: http://jsfiddle.net/kGN69/2/

1
додано
Це не впливає на ширину ваших елементів, однак, це хороша практика зробити це, якщо ви будете малювати кордон на: стан наведення. Якщо ви не матимете цієї прозорої кордону, веб-переглядач буде натискати ваш товар на 1 піксель (товщина кордону), коли вирівнюється, тому що йому доведеться виділити додатковий простір над вказаним елементом. Це не вплине на ваш код, оскільки ви оголосили display в inline , але це буде на inline-block або block або якщо ви вирішили додати кордони з боків. Живий приклад без і з прозорими кордонами: jsfiddle.net/kGN69/5 vs jsfiddle.net/kGN69/6
додано Автор Ninetou, джерело
Дуже дякую! Це саме те, що мені потрібно. Але щоб краще зрозуміти - чому перш за все потрібно зробити прозору кордон? Як це впливає на його ширину: наведіть курсор на?
додано Автор user2525842, джерело

Замість того, щоб використовувати маржи, скористайтеся замком Padding.

Чи можу я побачити ваше кодування ...? Було б набагато простіше.

По-перше, чи переконаєтесь ви, що ви редагуєте курсор на li?

Приклад:

#yourdiv li a:hover{
.....
}

Якщо ви, спробуйте змінити це.

Приклад:

#yourdiv{
...
padding-top:5px;
padding-bottom:5px;
padding-right:5px;
padding-left:5px;
}
0
додано

Замість того, щоб використовувати маржи, скористайтеся замком Padding.

Чи можу я побачити ваше кодування ...? Було б набагато простіше.

По-перше, чи переконаєтесь ви, що ви редагуєте курсор на li?

Приклад:

#yourdiv li a:hover{
.....
}

Якщо ви, спробуйте змінити це.

Приклад:

#yourdiv{
...
padding-top:5px;
padding-bottom:5px;
padding-right:5px;
padding-left:5px;
}
0
додано

Замість того, щоб використовувати маржи, скористайтеся замком Padding.

Чи можу я побачити ваше кодування ...? Було б набагато простіше.

По-перше, чи переконаєтесь ви, що ви редагуєте курсор на li?

Приклад:

#yourdiv li a:hover{
.....
}

Якщо ви, спробуйте змінити це.

Приклад:

#yourdiv{
...
padding-top:5px;
padding-bottom:5px;
padding-right:5px;
padding-left:5px;
}
0
додано