如何製作<hr />垂直標籤

Question

我如何使<hr />標籤垂直走向，而不是標準外觀作爲水平線/側身走？

我希望能夠在移動網站上使用它，所以更廣泛支持的解決方案比僅適用於最新瀏覽器的解決方案更可取。

Answer 1

你可以使用CSS變換。然而，這只是變成了現實，如果你沒有旋轉它，事情仍然會在那裏。

HTML

<hr/> 
<hr class="vert" /> 
<hr id="vert1" /> 

CSS

/*All <hr>*/ 
hr { 
    transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    /* IE 9 */ 
    -webkit-transform:rotate(90deg); 
    /* Safari and Chrome */ 
} 
/*<hr> of class ".vert"*/ 
hr.vert { 
    transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
} 
/*<hr> with id "vert1"*/ 
hr#vert1 { 
    transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
} 

Answer 2

這將需要改變的不僅僅是小時以上。上面和下面的元素必須浮動。效果可與固體邊界來實現：

<div class="section1"> content </div> 
<div class="section2"> more content </div> 

CSS：

.section1 { 
    float: left; 
    width: 200px; 
    border-right: 1px solid #333; 
} 

.section2 { 
    float: left; 
    width: 200px; 
} 

編輯：又見this answer

Answer 3

我想你可以重新風格<hr />爲inline-block的元素，與指定的高度...

hr { 
    display: inline-block; 
    width: 2px; 
    height: 256px; 
} 

這只是一個基本的例子讓<hr />看起來像我想你想看看。你必須有高度和寬度（以及可能的定位）讓它做你需要的東西玩...

Answer 4

把它放在一個div：

<div style="border-right:1px solid #333;"> 
Content here 
</div> 

這與內聯CSS。否則，獨立的CSS：

div { 
border-right:1px solid #333; 
} 

Answer 5

那麼你可能作出div（<div></div>），然後給它的css後來就高度/寬度值。如果你想讓它適用於一個特定的對象給它一個id<div id="">和多個對象給它，你會做的CSS的class<div class="">

一個例子是：

#(id name) or div.(class name) { 
height: ; (how tall) 
width: ; (how wide you want it) 
background-color: ; (sets the color of the bar) 
position: ; (depends on if you want it absolute or static etc.) } 

可以很明顯的添加/刪除其他CSS隨着你去取決於你想要做什麼