it-roy-ru.com

Высота границы на CSS

У меня есть таблица TD, и справа от нее я хочу добавить 1-пиксельную рамку, поэтому я сделал это:

table td {
    border-right:1px solid #000;
}

Он работает нормально, но проблема в том, что высота границы принимает общую высоту TD.

Есть ли способ установить высоту границы?

46
Satch3000

Нет, нет Граница всегда будет такой же высокой, как элемент.

Вы можете добиться того же эффекта, поместив содержимое ячейки в <span> и применив к нему стили высоты/границы. Или нарисовав короткую вертикальную линию в PNG шириной 1 пиксель, которая является правильной высотой, и применив ее в качестве фона для ячейки:

background:url(line.png) bottom right no-repeat;
49
meagar

У меня есть другая возможность. Это, конечно, «более новая» техника, но для моих проектов работ достаточно.

Это работает, только если вам нужна одна или две границы. Я никогда не делал это с 4 границами ... и, честно говоря, я пока не знаю ответа на этот вопрос.

.your-item {
  position: relative;
}

.your-item:after {
  content: '';
  height: 100%; //You can change this if you want smaller/bigger borders
  width: 1px;

  position: absolute;
  right: 0;
  top: 0; // If you want to set a smaller height and center it, change this value

  background-color: #000000; // The color of your border
}

Надеюсь, это вам тоже поможет, а для меня это простой обходной путь.

56
ReBa

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

border-right: 1px solid;
line-height: 10px;
47
CairoCoder

Для элементов td line-height успешно позволит вам изменить размер border-height, как упоминал SPrince. 

Для других элементов, таких как элементы списка, вы можете управлять высотой границы с помощью line-height и высотой фактического элемента с помощью margin-top и margin-bottom. 

Вот рабочий пример обоих: http://jsfiddle.net/byronj/gLcqu6mg/

Пример с элементами списка:

li { 
    list-style: none; 
    padding: 0 10px; 
    display: inline-block;
    border-right: 1px solid #000; 
    line-height: 5px; 
    margin: 20px 0; 
}

<ul>
    <li>cats</li>
    <li>dogs</li>
    <li>birds</li>
    <li>swine!</li>
</ul>
6
Byron

Нет, вы не можете установить высоту границы. 

4
Headshota
table {
 border-spacing: 10px 0px;
}

.rightborder {
border-right: 1px solid #fff;
}

Тогда с вашим кодом вы можете:

<td class="rightborder">whatever</td>

Надеюсь, это поможет!

1
Roy

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

table td {
    border-image: linear-gradient(transparent 10%, blue 10% 90%, transparent 90%) 0 0 0 1 / 3px;
}
0
cambthompson

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

0
cdeszaq

Основываясь на ответе @ ReBa выше, этот класс custom-border работал для меня.

Модификации:

  • работа с borderвместоbackaground-color, поскольку background-color не согласован.
  • Задайте height & top свойств :after таким образом, чтобы итог доходил до 100%, где значение bottom равно implicit.

ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

li {
  padding: 10px;
}

.custom-border {
  position: relative;
}

.custom-border:after {
  content: " ";
  position: absolute;
  border-left: 1px #6c757d solid;
  top: 35%;
  right: 0;
  height: 30%;
  margin-top: auto;
  margin-bottom: auto;
}
<ul>
  <li class="custom-border">
    Hello
  </li>
  <li class="custom-border">
    World
  </li>
  <li class="custom-border">
    Foo
  </li>
  <li class="custom-border">Bar</li>
  <li class="custom-border">Baz</li>
</ul>

Удачи...

0
Akash

Как и все остальные, вы не можете контролировать высоту границы. Но есть обходные пути, вот что я делаю:

table {
  position: relative;
}

table::before { /* ::after works too */
  content: "";
  position: absolute;
  right: 0; /* Change direction for a different side*/
  z-index: 100; 
  width: 3px; /* Thickness */
  height: 10px;
  background: #555; /* Color */
}

Вы можете установить height в inherit для высоты таблицы или calc(inherit - 2px) для меньшей на 2 пикселя границы Помните, что inherit не действует, если высота таблицы не установлена.

Используйте height: 50% для половины границы.

Демо

0
Simon Sand
.main-box{  
    border: solid 10px;
}
.sub-box{
    border-right: 1px solid;
}

// рисуем линию на правой стороне поля . позже добавляем margin-top и margin-bottom ., т.е.

.sub-box{
    border-right: 1px solid;
    margin-top: 10px;;
    margin-bottom: 10px;
}

Это может помочь в рисовании линии на правой стороне поля с зазором сверху и снизу.

0
manjunath vb