HTML kullanarak dikey bir çizgi nasıl yapılır?

<div>İşaretlemenin bir sonraki sırada görünmesini istediğiniz yere bir işaret koyun ve stil oluşturmak için CSS kullanın:

.verticalLine {
  border-left: thick solid #ff0000;
}

<div class="verticalLine">
  some other content
</div>

Dikey çizgiler oluşturmak için yatay kural etiketini kullanabilirsiniz.

<hr width="1" size="500">

Minimum genişlik ve büyük boyut kullanılarak yatay kural dikey kural haline gelir.

<div>Tam olarak çizginin görünmesini istediğiniz gibi stilize edilmiş bir boş kullanabilirsiniz :

HTML:

<div class="vertical-line"></div>

Tam yükseklikle (satır içi geçersiz kılma stili):

  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 görünüm istiyorsanız kenarlığı şekillendirin:

    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>

Elbette gelişmiş kombinasyonlarla da deney yapabilirsiniz:

  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 yatay çizgisini kullanarak dikey bir çizgi de yapabilirsiniz <hr />

html, body{height: 100%;}

hr.vertical {
  width: 0px;
  height: 100%;
  /* or height in PX */
}

<hr class="vertical" />

Elemana dikey bir eşdeğer yoktur <hr>. Bununla birlikte, denemek isteyebileceğiniz bir yaklaşım, ayırdığınız şeyin solunda veya sağında basit bir kenarlık kullanmaktır:

#your_col {
  border-left: 1px solid black;
}

<div id="your_col">
  Your content here
</div>

HTML5 özel öğeleri (veya saf CSS)

1. javascript

Öğenizi kaydedin.

var vr = document.registerElement('v-r'); // vertical rule please, yes!

* -Tüm özel elemanlarda zorunludur.

2. css

v-r {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

* Biraz uğraşmanız gerekebilir display:inline-block|inlineçünkü inlineiçerdiği elemanın yüksekliğine genişlemeyecektir. Çizgiyi bir kap içinde ortalamak için kenar boşluğunu kullanın.

3. somutlaştırmak

js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>

* Maalesef kendiliğinden kapanan etiketler oluşturamazsınız.

kullanım

 <h1>THIS<v-r></v-r>WORKS</h1>

örnek: http://html5.qry.me/vertical-rule

Javascript ile uğraşmak istemiyor musunuz?

Bu CSS sınıfını belirlenen öğenize uygulamanız yeterlidir.

css

.vr {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

* Yukarıdaki notlara bakınız.

Diğer bir seçenek, 1 piksellik bir görüntü kullanmak ve yüksekliği ayarlamaktır - bu seçenek, olması gereken yere kaydırmanıza olanak tanır.

Yine de en zarif çözüm değil.

Herhangi bir html öğesi ile yükseklik / genişlik kullanarak dikey bir çizgi çizebilirsiniz.

#verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
}

<div id="verticle-line"></div>

HTML'de dikey çizgi oluşturmak için herhangi bir etiket yok.

1. Yöntem: Bir çizgi resmi yüklersiniz. Sonra tarzını"height: 100px ; width: 2px"

2. Yöntem: <td>Etiketleri kullanabilirsiniz<td style="border-left: 1px solid red; padding: 5px;"> X </td>

Hr (yatay çizgi) etiketini kullanabilir ve aşağıdaki css ile 90 derece döndürebilirsiniz

hr {   
    transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

http://jsfiddle.net/haykaghabekyan/0c969bm6/1/

Önerilen "hr" kodunun bir kombinasyonunu kullandım ve kodum şöyle görünüyor:

<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>

Ben sadece "sol" piksel değeri değerini değiştirmek için değiştirdim. (Web sayfamdaki içeriği sıralamak için dikey satırı kullandım ve sonra kaldırdım.)

Bir div içinde ortalanmış dikey bir çizgi oluşturmak için bu kodu kullanabileceğinizi düşünüyorum. 'Konteyner'% 100 genişlik olabilir, sanırım.

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>

Neden html özel karakteri olan & # 124 kullanmıyorsunuz?

Hedefiniz yan yana alt öğeleri (sütun öğeleri) ayırmak için bir kaba dikey çizgiler koymaksa, kabı şu şekilde şekillendirmeyi düşünebilirsiniz:

.container > *:not(:first-child) {
  border-left: solid gray 2px;
}

Bu, 2. çocuktan başlayarak tüm alt öğelere sol kenarlık ekler. Başka bir deyişle, bitişik çocuklar arasında dikey sınırlar elde edersiniz.

• >bir çocuk seçicidir. Solda belirtilen öğelerin herhangi bir alt öğesiyle eşleşir.
• *evrensel bir seçicidir. Her tür öğeyle eşleşir.
• :not(:first-child) yani ebeveyninin ilk çocuğu değil.

Tarayıcı desteği: > *: ilk çocuk ve : değil ()

Bunun basit bir .child-except-first {border-left: ...}kuraldan daha iyi olduğunu düşünüyorum , çünkü dikey çizgilerin farklı alt öğelerin kurallarından değil, kabın kurallarından gelmesi daha mantıklı.

Bunun geçici bir dikey kural öğesi kullanmaktan daha iyi olup olmadığı (yatay bir kural vb. Oluşturarak) kullanım durumunuza bağlı olacaktır, ancak bu en azından bir alternatiftir.

Bir yaklaşım daha mümkündür: SVG kullanımı .

Örneğin :

<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>

Artıları:

• Herhangi bir uzunluk ve yönlendirme çizgisine sahip olabilirsiniz.
• Genişliği, rengi kolayca belirleyebilirsiniz

Eksileri :

• SVG artık çoğu modern tarayıcıda desteklenmektedir. Ancak bazı eski tarayıcılar (IE 8 ve üstü gibi) bunu desteklemez.

Div doğru dikey çizgi

    <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 için sol dikey çizgi

    <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>
  

Dikey bir çizgi eklemek için bir saat stil yapmanız gerekir.

Şimdi dikey bir çizgi yaptığınızda sayfanın ortasında görünecektir:

<hr style="width:0.5px;height:500px;"/>

Şimdi istediğiniz yere koymak için şu kodu kullanabilirsiniz:

<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>

Bu, sola konumlandırır, sağa konumlandırmak için ters çevirebilirsiniz.

<hr>Yatay çizgi için bir etiket var . Yatay çizgi yapmak için CSS ile de kullanılabilir:

.divider{
    margin-left: 5px;
    margin-right: 5px;
    height: 100px;
    width: 1px;
    background-color: red;
}

<hr class="divider">

Width özelliği, çizginin kalınlığını belirler. Height özelliği, çizginin uzunluğunu belirler. Arka plan rengi özelliği çizginin rengini belirler.

Bundan sonra dikey satırı uygulamak istediğiniz Önceki öğede, CSS'yi ayarlayabilirsiniz ...

border-right-width: thin;
border-right-color: black;
border-right-style: solid;

<hr>90 derece döndürün :

<hr style="width:100px; transform:rotate(90deg);">

Satır içi bir stil için bu kodu kullandım:

<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />

ve bu onu doğrudan merkeze yerleştirdi.

Satır içi dikey bir çizgiye ihtiyacım vardı, bu yüzden bir düğmeyi çizgi haline getirdim.

<button type="button" class="v_line">l</button>

.v_line {
         width: 0px;
         padding: .5em .5px;
         background-color: black;
         margin: 0px; 4px;
        }

<div style="width:1px;background-color:#C0C0C0;"></div>

Bu benim için harika çalıştı

Dikey çizgiyi orta kullanımda ortalamak için:

position: absolute; 
left: 50%;