Как сделать вертикальную линию в HTML

Question

Как сделать вертикальную линию в HTML

Как сделать вертикальную линию с помощью HTML?

2028 20

html css

20 ответов:

Comments

Ничего не найдено.

Kris van der Mast · Accepted Answer · 2017-01-05 08:20:05

поставить <div> вокруг разметки, где вы хотите, чтобы строка отображалась рядом, и используйте CSS для ее стиля:
.verticalLine {
  border-left: thick solid #ff0000;
}
<div class="verticalLine">
  some other content
</div>

Anthony · Accepted Answer · 2017-07-13 15:15:44

вы можете использовать тег горизонтального правила для создания вертикальных линий.
<hr width="1" size="500">
используя минимальную ширину и большой размер, горизонтальное правило становится вертикальным.

awe · Accepted Answer · 2018-07-12 08:36:17

вы можете использовать пустой <div> это стилизовано точно так, как вы хотите, чтобы строка появилась:

HTML:
<div class="vertical-line"></div>
С точной высотой (переопределение стиля в линию):
  div.vertical-line{
      width: 1px; /* Line width */
      background-color: black; /* Line color */
      height: 100%; /* Override in-line if you want specific height. */
      float: left; /* Causes the line to float to left of content. 
        You can instead use position:absolute or display:inline-block
        if this fits better with your design */
    }
<div class="vertical-line" style="height: 45px;"></div>
стиль границы, если вы хотите 3D вид:
    div.vertical-line{
      width: 0px; /* Use only border style */
      height: 100%;
      float: left; 
      border: 1px inset; /* This is default border style for <hr> tag */
    }
   <div class="vertical-line" style="height: 45px;"></div>
вы можете, конечно, также экспериментировать с расширенными комбинациями:
  div.vertical-line{
      width: 1px;
      background-color: silver;
      height: 100%;
      float: left;
      border: 2px ridge silver ;
      border-radius: 2px;
    }
 <div class="vertical-line" style="height: 45px;"></div>

Ishan Jain · Accepted Answer · 2018-09-24 23:07:00

вы также можете сделать вертикальную линию с помощью HTML горизонтальной линии <hr />
html, body{height: 100%;}

hr.vertical {
  width: 0px;
  height: 100%;
  /* or height in PX */
}
<hr class="vertical" />

Daniel Vassallo · Accepted Answer · 2018-09-24 20:21:28

нет вертикального эквивалента <hr> элемент. Однако один из подходов, который вы можете попробовать, - это использовать простую границу слева или справа от того, что вы разделяете:
#your_col {
  border-left: 1px solid black;
}
<div id="your_col">
  Your content here
</div>

Qwerty · Accepted Answer · 2018-07-19 15:00:18

HTML5 настраиваемые элементы (или чистый CSS)

1. javascript

зарегистрировать свой элемент.
var vr = document.registerElement('v-r'); // vertical rule please, yes!
* The - является обязательным во всех настраиваемых элементов.

2. css
v-r {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}
*возможно, вам придется немного повозиться с display:inline-block|inline, потому что inline не будет расширяться до высоты содержащего элемента. Используйте поле для центрирования линии в пределах a контейнер.

3. инстанцировать
js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>
*к сожалению, вы не можете создать пользовательские самозакрывающиеся теги.

использование
 <h1>THIS<v-r></v-r>WORKS</h1>
пример:http://html5.qry.me/vertical-rule

не хотите возиться с javascript?

просто примените этот класс CSS к назначенному вами элемент.

css
.vr {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}
*см. Примечания выше.

chris · Accepted Answer · 2010-06-30 20:40:20

еще один вариант-использовать 1-пиксельное изображение и установить высоту - эта опция позволит вам плавать туда, где вам нужно быть.

Не самое элегантное решение, хотя.

onurbaysan · Accepted Answer · 2010-06-30 13:54:32

нет никакого тега для создания вертикальной линии в HTML.

метод: вы загружаете изображение линии. Затем вы устанавливаете его стиль, как "height: 100px ; width: 2px"

метод: вы можете использовать <td> теги <td style="border-left: 1px solid red; padding: 5px;"> X </td>

Lance Caraccioli · Accepted Answer · 2013-04-29 20:30:01

Почему бы не использовать |, который является html специальным символом для |

Hayk Aghabekyan · Accepted Answer · 2014-09-05 01:59:34

вы можете использовать HR (горизонтальная линия) тег и чем повернуть его на 90 градусов с css ниже
hr {   
    transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}
http://jsfiddle.net/haykaghabekyan/0c969bm6/1/

Guy · Accepted Answer · 2018-03-28 17:26:57

я использовал комбинацию предложенного кода "hr", и вот как выглядит мой код:
<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>
Я просто изменил значение" левого " значения пикселя, чтобы расположить его. (Я использовал вертикальную линию для выравнивания контента на своей веб-странице, а затем удалил ее.)

S. Kirby · Accepted Answer · 2016-01-02 04:26:40

если ваша цель состоит в том, чтобы поместить вертикальные линии в контейнер для разделения бок о бок дочерних элементов (элементов столбцов), вы можете рассмотреть возможность стилизации контейнера следующим образом:
.container > *:not(:first-child) {
  border-left: solid gray 2px;
}
это добавляет левую границу для всех дочерних элементов, начиная с 2-го ребенка. Другими словами, вы получаете вертикальные границы между соседними детьми.

> является дочерним селектором. Он соответствует любому дочернему элементу (элементам), указанным слева.

* is a универсальный селектор. Он соответствует элементу любого типа.

:not(:first-child) значит, это не первый ребенок своего родителя.

поддержка браузера: > * :первый-ребенок и :не()

Я думаю, что это лучше, чем просто .child-except-first {border-left: ...} правило, потому что имеет больше смысла, чтобы вертикальные линии исходили из правил контейнера, а не из правил разных дочерних элементов.

лучше ли это, чем использование импровизированного вертикальный элемент (путем укладки в горизонтальное правило и т. д.) будет зависеть от вашего варианта использования, но это как минимум альтернатива.

Sachin · Accepted Answer · 2016-02-16 21:18:43

возможен еще один подход: использование SVG.

например :
<svg height="210" width="500">
    <line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
      Sorry, your browser does not support inline SVG.
</svg>
плюсы :

вы можете иметь линию любой длины и ориентации.

вы можете указать ширину, цвет легко

плюсы :

SVG теперь поддерживаются в большинстве современных браузеров. Но некоторые старые браузеры (например, IE 8 и старше) не поддерживают его.

Peter Georges Bou Saada · Accepted Answer · 2018-03-28 17:28:30

чтобы добавить вертикальную линию, вам нужно создать hr.

теперь, когда вы делаете вертикальную линию, она появится в середине страницы:
<hr style="width:0.5px;height:500px;"/>
теперь положите его, где вы хотите, вы можете использовать этот код:
<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>
это расположит его влево, вы можете инвертировать его, чтобы расположить его вправо.

Pranav V R · Accepted Answer · 2018-04-27 14:50:32

вертикальная линия справа от div

    <div style="width:50%">
        <div style="border-right:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>

вертикальная линия слева от div

    <div style="width:50%">
        <div style="border-left:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>

Edd · Accepted Answer · 2018-09-24 18:54:10

чтобы создать вертикальную линию, центрированную внутри div, я думаю, вы можете использовать этот код. "Контейнер" вполне может быть шириной 100%, я думаю.
div.container {
  width: 400px;
}

div.vertical-line {
  border-left: 1px solid #808080;
  height: 350px;
  margin-left: auto;
  margin-right: auto;
  width: 1px;
}
<div class="container">
  <div class="vertical-line">&nbsp;</div>
</div>

Aamir Shahzad · Accepted Answer · 2018-09-25 03:02:52

вы можете нарисовать вертикальную линию, просто используя высоту / ширину с любым элементом html.
#verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
}
<div id="verticle-line"></div>

Abhishek Mathur · Accepted Answer · 2016-03-23 10:32:36

в предыдущем элементе, после которого вы хотите применить вертикальную строку, вы можете установить CSS ...
border-right-width: thin;
border-right-color: black;
border-right-style: solid;

James Drinkard · Accepted Answer · 2016-05-25 20:29:46

для встроенного стиля я использовал этот код:
<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />
и это расположило его прямо в центре.

andr3wll · Accepted Answer · 2013-02-12 04:47:29

чтобы сделать вертикальную линию к центру в середине использовать:
position: absolute; 
left: 50%;