jak mieć dwie pozycje na tej samej linii w html

Question

Chcę mieć dwie nagłówki h2 i h3 na tej samej poziomej zasadzie jedna po lewej, a druga po prawej. Mają HR pod nimi i chcę, żeby znajdowali się w tej samej odległości od HR.

Próbowałem, aby oba były wbudowane i jeden pływak w prawo, a drugi w lewo. Problem polegał na tym, że h3, ponieważ jest mniejszy niż h2 w pionie, był wyśrodkowany na połowie długości h2.

h2 było trochę jak siedzenie na hr i h3 trochę wyglądało jak unoszące się w powietrzu.

Chciałem, żeby byli jak oboje siedząc w godz.

h2{ 
display:inline; 
float:left; 
} 
h3{ 
display:inline; 
float:right; 
} 

Mówiłem o wizualnym opisywaniu sytuacji.

Answer 1

trzeba by owinąć dwa nagłówki w div tagu, a Niech ten znacznik div używa stylu, który ma clear: both. np:

<div style="clear: both"> 
    <h2 style="float: left">Heading 1</h2> 
    <h3 style="float: right">Heading 2</h3> 
</div> 
<hr /> 

Mając hrpo tag div będzie upewnić się, że jest wciśnięty pod obu nagłówków.

Albo coś bardzo podobnego do tego. Mam nadzieję że to pomoże.

Answer 2

Trzeba tylko trzeba zrobić jeden:

• uczynić je zarówno inline (lub inline-block)
• Ustaw je do float lewej lub prawej

powinna być w stanie dostosować height, padding lub margin właściwości mniejszego nagłówka w celu skompensowania jego położenia. Zalecam ustawienie obu nagłówków tak, aby miały tę samą wartość height.

Zobacz przykład live jsFiddle.

(kod jsFiddle):

CSS

h2 { 
    font-size: 50px; 
} 

h3 { 
    font-size: 30px; 
} 

h2, h3 { 
    width: 50%; 
    height: 60px; 
    margin: 0; 
    padding: 0; 
    display: inline; 
}​ 

HTML

<h2>Big Heading</h2> 
<h3>Small(er) Heading</h3> 
<hr />​ 

Answer 3

Właściwość vertical-align Css powinno pomóc tutaj:

vertical-align: bottom; 

jest to, czego potrzebujesz do swojego mniejszego nagłówka :)

Vertical-Align

Answer 4

Sprawdź moje rozwiązanie próbka

<h5 style="float: left; width: 50%;">Employee: Employee Name</h5> 
<h5 style="float: right; width: 50%; text-align: right;">Employee: Employee Name</h5> 

Spowoduje to podzielenie strony na dwie części i wstawienie dwóch nagłówków ele równo z prawą i lewą stroną.

Answer 5

Poniższy kod pozwala na umieszczenie dwóch nagłówków w tej samej linii, w pierwszym wyrównanym do lewej i w drugim wyrównanym do prawej, i ma dodatkową zaletę polegającą na zachowaniu obu nagłówków na tej samej linii bazowej.

HTML części:

<h1 class="text-left-right"> 
    <span class="left-text">Heading Goes Here</span> 
    <span class="byline">Byline here</span> 
</h1> 

I CSS:

.text-left-right { 
    text-align: right; 
    position: relative; 
} 
.left-text { 
    left: 0; 
    position: absolute; 
} 
.byline { 
    font-size: 16px; 
    color: rgba(140, 140, 140, 1); 
}