Łączenie stylu z treścią nie jest dla wielu tabu. <div style = "border-left: thin solid # 0000ff"> Nie mam nic do powiedzenia i mówię to </div>
ctpenrose
15
@ctpenrose To rzeczywiście nie jest tabu, ale ich oddzielenie jest przydatne, ponieważ w razie potrzeby można łatwo dostosować w jednym miejscu. Również umieszczenie go w osobnym pliku CSS jest lepsze dla wydajności, ponieważ może być buforowane przez przeglądarkę i kończy się przesyłaniem mniejszej ilości bajtów przez drut za każdym razem, gdy żądasz renderowanego HTML.
Kris van der Mast
235
Za pomocą znacznika reguły poziomej można tworzyć pionowe linie.
Brawo, proszę pana. To fajna sztuczka. Nadal trzeba ustawić go w display:inline-blockprzeciwnym razie nie będzie ładnie siedzieć obok innych elementów wbudowanych.
Alex W
2
Nie sądzę jednak, aby działało to w przeglądarce Firefox. Linia jest tam, ale wydaje się, że nie jest widoczna ...
Giulio, ponieważ tak naprawdę nie dzieli ekranu na dwie kolumny. znowu musisz użyć trochę css dla pożądanego rezultatu, tak jak div.
Ismail Sahin
Podoba mi się to bardziej, ponieważ pozwala uniknąć dziwności posiadania ukrytego diva z widoczną tylko jedną stroną. To prawda, że nie jest to sposób, w jaki zwykle używasz hr, ale nadal ma to dla mnie większy sens.
levininja
71
Możesz użyć pustego <div>stylu, który jest dokładnie taki, jak chcesz, aby pojawiała się linia:
HTML:
<divclass="vertical-line"></div>
Z dokładną wysokością (nadrzędny styl w linii):
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 */}
Świetna sztuczka, aby uzyskać styl linii taki sam jak standardowy <hr>. Prawdopodobnie również potrzebują dodatkowej stylizacji do pływaka na stronie treści (przykładowo float:left;)
respekt
Ta „pionowa” reguła wciąż rozdziela (tekst) elementy pionowo, jak normalna pozioma reguła.
Qwerty
20
Nie ma pionowego odpowiednika <hr>elementu. Jednak jednym z podejść, które możesz wypróbować, jest użycie prostej ramki po lewej lub prawej stronie tego, co oddzielasz:
* Być może będziesz musiał trochę pogrzebać, display:inline-block|inlineponieważ inlinenie rozwija się do wysokości elementu. Użyj marginesu, aby wyśrodkować linię w kontenerze.
Przykro mi z powodu ograniczeń, ale wygląda to naprawdę, bardzo przydatne w niektórych innych miejscach.
Smar
Nie wypełnia wszystkich rozmiarów div, jak to naprawić?
Otávio Barreto
1
@ OtávioBarreto Być może trzeba będzie majstrować przy komentowanej displaynieruchomości. Ustaw na jeden inlinelub inline-block. Zobacz uwagi powyżej i przykładowy adres URL.
Qwerty
9
Inną opcją jest użycie obrazu 1-pikselowego i ustawienie wysokości - ta opcja pozwoli Ci przenieść go tam, gdzie chcesz.
Nie jest to jednak najbardziej eleganckie rozwiązanie.
Po prostu zmieniłem wartość „lewego” piksela, aby go ustawić. (Użyłem pionowej linii do uszeregowania treści na mojej stronie, a następnie ją usunąłem).
Jeśli Twoim celem jest umieszczenie pionowych linii w kontenerze w celu oddzielenia obok siebie elementów potomnych (elementów kolumny), możesz rozważyć stylizację kontenera w następujący sposób:
Dodaje to lewą ramkę do wszystkich elementów potomnych, począwszy od drugiego dziecka. Innymi słowy, otrzymujesz pionowe granice między sąsiadującymi dziećmi.
>jest selektorem dzieci. Pasuje do dowolnego elementu podrzędnego elementu określonego po lewej stronie.
*jest uniwersalnym selektorem. Pasuje do elementu dowolnego typu.
:not(:first-child) oznacza, że nie jest to pierwsze dziecko jego rodzica.
Myślę, że to lepsze niż proste .child-except-first {border-left: ...} reguła, ponieważ bardziej sensowne jest, aby pionowe linie pochodziły z reguł kontenera, a nie reguł różnych elementów potomnych.
To, czy jest to lepsze niż użycie prowizorycznego elementu reguły pionowej (poprzez stylowanie reguły poziomej itp.), Będzie zależeć od twojego przypadku użycia, ale jest to przynajmniej alternatywa.
Możliwe jest jeszcze jedno podejście: użycie SVG .
np .:
<svgheight="210"width="500"><linex1="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>
Plusy:
Możesz mieć linię o dowolnej długości i orientacji.
Możesz łatwo określić szerokość i kolor
Cons :
Pliki SVG są teraz obsługiwane w większości nowoczesnych przeglądarek. Ale niektóre stare przeglądarki (np. IE 8 i starsze) nie obsługują tego.
<divstyle="width:50%"><divstyle="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>
<divstyle="width:50%"><divstyle="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>
<vr>
Odpowiedzi:
Umieść
<div>
znacznik wokół miejsca, w którym ma się pojawić linia, i użyj stylów CSS:źródło
Za pomocą znacznika reguły poziomej można tworzyć pionowe linie.
Dzięki zastosowaniu minimalnej szerokości i dużego rozmiaru reguła pozioma staje się pionową.
źródło
display:inline-block
przeciwnym razie nie będzie ładnie siedzieć obok innych elementów wbudowanych.Możesz użyć pustego
<div>
stylu, który jest dokładnie taki, jak chcesz, aby pojawiała się linia:HTML:
Z dokładną wysokością (nadrzędny styl w linii):
Nadaj styl ramce, jeśli chcesz wyglądać 3D:
Możesz oczywiście także eksperymentować z zaawansowanymi kombinacjami:
źródło
Możesz także utworzyć linię pionową za pomocą poziomej linii HTML
<hr />
źródło
<hr>
. Prawdopodobnie również potrzebują dodatkowej stylizacji do pływaka na stronie treści (przykładowofloat:left;
)Nie ma pionowego odpowiednika
<hr>
elementu. Jednak jednym z podejść, które możesz wypróbować, jest użycie prostej ramki po lewej lub prawej stronie tego, co oddzielasz:źródło
Elementy niestandardowe HTML5 (lub czysty CSS)
1. javascript
Zarejestruj swój element.
*
-
Jest obowiązkowy we wszystkich niestandardowych elementach.2. css
* Być może będziesz musiał trochę pogrzebać,
display:inline-block|inline
ponieważinline
nie rozwija się do wysokości elementu. Użyj marginesu, aby wyśrodkować linię w kontenerze.3. utworzyć wystąpienie
* Niestety nie można tworzyć niestandardowych tagów samozamykających.
stosowanie
przykład: http://html5.qry.me/vertical-rule
Nie chcesz zadzierać z javascript?
Po prostu zastosuj tę klasę CSS do wyznaczonego elementu.
css
* Patrz uwagi powyżej.
źródło
display
nieruchomości. Ustaw na jedeninline
lubinline-block
. Zobacz uwagi powyżej i przykładowy adres URL.Inną opcją jest użycie obrazu 1-pikselowego i ustawienie wysokości - ta opcja pozwoli Ci przenieść go tam, gdzie chcesz.
Nie jest to jednak najbardziej eleganckie rozwiązanie.
źródło
Możesz narysować linię pionową, po prostu używając wysokości / szerokości z dowolnym elementem HTML.
źródło
Nie ma żadnego znacznika do utworzenia pionowej linii w HTML.
Metoda: ładujesz obraz linii. Następnie ustaw swój styl
"height: 100px ; width: 2px"
Metoda: Możesz użyć
<td>
tagów<td style="border-left: 1px solid red; padding: 5px;"> X </td>
źródło
Możesz użyć znacznika hr (pozioma linia), a następnie obrócić go o 90 stopni za pomocą css poniżej
http://jsfiddle.net/haykaghabekyan/0c969bm6/1/
źródło
Użyłem kombinacji sugerowanego kodu „hr” i oto, jak wygląda mój kod:
Po prostu zmieniłem wartość „lewego” piksela, aby go ustawić. (Użyłem pionowej linii do uszeregowania treści na mojej stronie, a następnie ją usunąłem).
źródło
Aby utworzyć pionową linię wyśrodkowaną w div, myślę, że możesz użyć tego kodu. „Pojemnik” może mieć chyba 100% szerokości.
źródło
Dlaczego nie użyć & # 124, który jest znakiem specjalnym HTML dla |
źródło
Jeśli Twoim celem jest umieszczenie pionowych linii w kontenerze w celu oddzielenia obok siebie elementów potomnych (elementów kolumny), możesz rozważyć stylizację kontenera w następujący sposób:
Dodaje to lewą ramkę do wszystkich elementów potomnych, począwszy od drugiego dziecka. Innymi słowy, otrzymujesz pionowe granice między sąsiadującymi dziećmi.
>
jest selektorem dzieci. Pasuje do dowolnego elementu podrzędnego elementu określonego po lewej stronie.*
jest uniwersalnym selektorem. Pasuje do elementu dowolnego typu.:not(:first-child)
oznacza, że nie jest to pierwsze dziecko jego rodzica.Obsługa przeglądarki: > *: first-child i : not ()
Myślę, że to lepsze niż proste
.child-except-first {border-left: ...}
reguła, ponieważ bardziej sensowne jest, aby pionowe linie pochodziły z reguł kontenera, a nie reguł różnych elementów potomnych.To, czy jest to lepsze niż użycie prowizorycznego elementu reguły pionowej (poprzez stylowanie reguły poziomej itp.), Będzie zależeć od twojego przypadku użycia, ale jest to przynajmniej alternatywa.
źródło
Możliwe jest jeszcze jedno podejście: użycie SVG .
np .:
Plusy:
Cons :
źródło
Linia pionowa bezpośrednio do div
Linia pionowa w lewo do div
źródło
Aby dodać linię pionową, musisz stylizować godz.
Teraz, gdy utworzysz linię pionową, pojawi się ona na środku strony:
Teraz, aby umieścić go tam, gdzie chcesz, możesz użyć tego kodu:
Spowoduje to ustawienie go w lewo, możesz go odwrócić, aby ustawić go w prawo.
źródło
Jest
<hr>
znacznik dla linii poziomej. Można go używać z CSS do tworzenia linii poziomej również:Właściwość width określa grubość linii. Właściwość height określa długość linii. Właściwość kolor tła określa kolor linii.
źródło
W poprzednim elemencie, po którym chcesz zastosować wiersz pionowy, możesz ustawić CSS ...
źródło
Obróć o
<hr>
90 stopni:źródło
Dla stylu wbudowanego użyłem tego kodu:
i to umieściło go bezpośrednio w centrum.
źródło
Potrzebowałem liniowej linii pionowej, więc oszukałem przycisk, aby stać się linią.
źródło
To zadziałało dla mnie świetnie
źródło
Aby ustawić linię pionową na środku w środku, użyj:
źródło