Блог

Главная - Вопросы по программированию - Ширина границы CSS задает высоту границы, а не ширину

Ширина границы CSS задает высоту границы, а не ширину

#css

#css — код

Вопрос:

Я использую border-width: 100px; в попытке установить горизонтальную ширину на 100px , но вместо этого он устанавливает высоту на 100px .

Помощь приветствуется.

 .border-top-green {
  border-top: 1px solid #4C9962;
  border-width: 100px;
  padding-top: 16px;
} 
 <h4 class="border-top-green">Strong Leadership</h4>

Ответ №1:

Такой границы «ширина», как вам требуется, не существует. Все границы составляют 100% от их соответствующей стороны. Вам нужно будет подделать границу, используя псевдоэлемент

 .border-top-green {
  padding-top: 16px;
  position: relative;
  text-align: right;
}

.border-top-green:after {
  content: "";
  width: 100px;
  height: 1px;
  background: #4C9962;
  position: absolute;
  top: 0;
  right: 0;
} 
 <h4 class="border-top-green">Strong Leadership</h4>

Комментарии:

1. Спасибо. Я не могу заставить его отображаться в правильном положении на живом сайте (чуть выше «SPECIALTY FERTILIZER COMPANY», которая находится выше «Лучшее питание происходит от лучшего удобрения»)

2. Смотрите мои изменения в приведенном выше фрагменте.

Ответ №2:

Это то, что вы ищете?

 .border-top-green {
  border-top: 1px solid #4C9962;
  border-width: 100px;
  padding-top: 16px;
display: inline-block;
} 
 <h4 class="border-top-green">Strong Leadership</h4>
Метки: