Как сделать вертикальную линию в HTML
Как сделать вертикальную линию с помощью HTML?
20 ответов
поставить <div> вокруг разметки, где вы хотите, чтобы строка появилась рядом, и используйте CSS для ее стиля:
.verticalLine {
border-left: thick solid #ff0000;
}<div class="verticalLine">
some other content
</div>для создания вертикальных линий можно использовать тег горизонтального правила.
<hr width="1" size="500">используя минимальную ширину и большой размер, горизонтальное правило становится вертикальным.
вы можете использовать пустой <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>вы также можете сделать вертикальную линию с помощью HTML горизонтальной линии <hr />
html, body{height: 100%;}
hr.vertical {
width: 0px;
height: 100%;
/* or height in PX */
}<hr class="vertical" />нет вертикального эквивалента <hr> элемент. Однако один из подходов, который вы можете попробовать, - использовать простую границу слева или справа от того, что вы разделяете:
#your_col {
border-left: 1px solid black;
}<div id="your_col">
Your content here
</div>в HTML5 настраиваемые элементы (или чистый CSS)
1. в JavaScript
зарегистрировать свой элемент.
var vr = document.registerElement('v-r'); // vertical rule please, yes!
*о - является обязательным во всех настраиваемых элементов.
2. в CSS
v-r {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}
*возможно, вам придется немного поиграть с display:inline-block|inline, потому что inline не будет расширяться до высоты содержащего элемента. Использовать маржу до центра линии в контейнер.
3. instantiate
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;*/
}
*см. Примечания выше.
еще один вариант-использовать 1-пиксельное изображение и установить высоту - эта опция позволит вам плавать туда, где вам нужно быть.
Не самое элегантное решение, хотя.
нет никакого тега для создания вертикальной линии в HTML.
метод: вы загружаете изображение линии. Затем вы устанавливаете свой стиль как
"height: 100px ; width: 2px"метод: вы можете использовать
<td>теги<td style="border-left: 1px solid red; padding: 5px;"> X </td>
вы можете использовать тег hr (горизонтальная линия) и повернуть его на 90 градусов с помощью css ниже
hr {
transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
я использовал комбинацию предложенного кода "hr", и вот как выглядит мой код:
<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>
Я просто изменил значение значения" левого " пикселя, чтобы расположить его. (Я использовал вертикальную линию для выравнивания контента на своей веб-странице, а затем удалил ее.)
если ваша цель состоит в том, чтобы поместить вертикальные линии в контейнер для разделения дочерних элементов бок о бок (элементы столбцов), вы можете рассмотреть возможность стилизации контейнера следующим образом:
.container > *:not(:first-child) {
border-left: solid gray 2px;
}
это добавляет левую границу ко всем дочерним элементам, начиная со 2-го ребенка. Другими словами, вы получаете вертикальные границы между соседними детьми.
-
>селектор ребенка. Он соответствует любому дочернему элементу (элементам), указанному слева. -
*- это универсальный селектор. Он соответствует элементу любого типа. -
:not(:first-child)значит, это не первый ребенок своего родителя.
поддержка браузера: > * :первый-ребенок и :не()
Я думаю, что это лучше, чем просто .child-except-first {border-left: ...} правило, потому что имеет смысл, чтобы вертикальные линии исходили из правил контейнера, а не из правил различных дочерних элементов.
ли это лучше, чем использование самодельного вертикальный элемент правила (путем укладки горизонтального правила и т. д.) будет зависеть от вашего варианта использования, но это как минимум альтернатива.
возможен еще один подход: использование 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 и старше) не поддерживают его.
чтобы добавить вертикальную линию, вам нужно создать hr.
теперь, когда вы делаете вертикальную линию, она появится в середине страницы:
<hr style="width:0.5px;height:500px;"/>
теперь положите его, где вы хотите, вы можете использовать этот код:
<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>
это расположит его влево, вы можете инвертировать его, чтобы расположить его вправо.
вертикальная линия прямо к 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>
чтобы создать вертикальную линию, центрированную внутри 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"> </div>
</div>вы можете нарисовать вертикальную линию, просто используя высоту / ширину с любым html-элементом.
#verticle-line {
width: 1px;
min-height: 400px;
background: red;
}<div id="verticle-line"></div>в предыдущем элементе, после которого вы хотите применить вертикальную строку, вы можете установить CSS ...
border-right-width: thin;
border-right-color: black;
border-right-style: solid;
для встроенного стиля я использовал этот код:
<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />
и это расположило его непосредственно в центре.