คุณสร้างเส้นแนวตั้งโดยใช้ HTML ได้อย่างไร

วาง<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. จาวาสคริปต์

ลงทะเบียนองค์ประกอบของคุณ

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จะไม่ขยายไปถึงความสูงขององค์ประกอบ ใช้ระยะขอบเพื่อจัดกึ่งกลางบรรทัดภายในคอนเทนเนอร์

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

ไม่ต้องการยุ่งกับจาวาสคริปต์หรือ

เพียงใช้คลาส CSS นี้กับองค์ประกอบที่คุณกำหนด

CSS

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

* ดูหมายเหตุด้านบน

อีกตัวเลือกหนึ่งคือการใช้ภาพขนาด 1 พิกเซลและตั้งค่าความสูง - ตัวเลือกนี้จะช่วยให้คุณลอยไปยังตำแหน่งที่คุณต้องการ

ไม่ใช่ทางออกที่หรูหราที่สุด

คุณสามารถวาดเส้นแนวตั้งโดยใช้ความสูง / ความกว้างกับองค์ประกอบ html ใด ๆ

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

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

ไม่มีแท็กที่จะสร้างบรรทัดแนวตั้งใน HTML

1. วิธีการ: คุณโหลดภาพเส้น จากนั้นคุณกำหนดรูปแบบเช่น"height: 100px ; width: 2px"

2. วิธีการ: คุณสามารถใช้<td>แท็ก<td style="border-left: 1px solid red; padding: 5px;"> X </td>

คุณสามารถใช้แท็กชม (เส้นแนวนอน) และหมุนได้ 90 องศาด้วย css ด้านล่าง

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

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

ฉันใช้การรวมกันของรหัส "ชั่วโมง" แนะนำและนี่คือสิ่งที่รหัสของฉันดูเหมือนว่า:

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

ฉันเพียงแค่เปลี่ยนค่าของพิกเซล "ซ้าย" เพื่อวางตำแหน่ง (ฉันใช้เส้นแนวตั้งเพื่อจัดเรียงเนื้อหาบนหน้าเว็บของฉันแล้วลบออก)

ในการสร้างเส้นแนวตั้งที่อยู่กึ่งกลางภายใน 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>

ทำไมไม่ใช้ & # 124 ซึ่งเป็นอักขระพิเศษ html สำหรับ |

หากเป้าหมายของคุณคือการวางเส้นแนวตั้งลงในคอนเทนเนอร์เพื่อแยกองค์ประกอบย่อยแบบคู่ต่อกัน (องค์ประกอบคอลัมน์) คุณสามารถพิจารณาจัดแต่งทรงผมแบบคอนเทนเนอร์ดังนี้:

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

นี่เป็นการเพิ่มเส้นขอบด้านซ้ายให้กับองค์ประกอบย่อยทั้งหมดที่เริ่มต้นจากลูกที่สอง กล่าวอีกนัยหนึ่งคุณจะได้เส้นแนวตั้งระหว่างเด็กที่อยู่ติดกัน

• >เป็นตัวเลือกลูก มันตรงกับลูก ๆ ขององค์ประกอบที่ระบุทางด้านซ้าย
• *เป็นตัวเลือกสากล มันตรงกับองค์ประกอบทุกประเภท
• :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 ขึ้นไป) ไม่รองรับ

เส้นแนวตั้งไปทางขวา

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

ในการเพิ่มเส้นแนวตั้งคุณจำเป็นต้องกำหนดรูปแบบเป็นชั่วโมง

ตอนนี้เมื่อคุณสร้างเส้นแนวตั้งมันจะปรากฏขึ้นตรงกลางของหน้า:

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

ตอนนี้วางไว้ในตำแหน่งที่คุณต้องการคุณสามารถใช้รหัสนี้:

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

สิ่งนี้จะวางตำแหน่งไปทางซ้ายคุณสามารถผกผันเพื่อจัดตำแหน่งไปทางขวา

มี<hr>แท็กสำหรับเส้นแนวนอน มันสามารถใช้กับ CSS เพื่อสร้างเส้นแนวนอนด้วย:

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

<hr class="divider">

คุณสมบัติความกว้างเป็นตัวกำหนดความหนาของเส้น คุณสมบัติความสูงเป็นตัวกำหนดความยาวของบรรทัด คุณสมบัติ background-color กำหนดสีของบรรทัด

ในองค์ประกอบก่อนหน้าหลังจากที่คุณต้องการใช้แถวแนวตั้งคุณสามารถตั้งค่า CSS ...

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

หมุน<hr>90 องศา:

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

สำหรับรูปแบบอินไลน์ฉันใช้รหัสนี้:

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

และวางตำแหน่งตรงกลาง

ฉันต้องการเส้นแนวตั้งแบบอินไลน์ดังนั้นฉันจึงหลอกให้ปุ่มกลายเป็นเส้น

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

มันใช้งานได้ดีสำหรับฉัน

ในการทำให้เส้นแนวตั้งเป็นจุดศูนย์กลางในการใช้งานตรงกลาง:

position: absolute; 
left: 50%;