如何在html中的同一行上有兩個標題

我想在左側和右側的同一水平規則一上有兩個標題h2和h3。他們下面有一個人力資源部門，我希望他們與這個人力資源部門的距離相同。如何在html中的同一行上有兩個標題

我試着讓它們都是內聯的，並且有一個右邊的，另一個左邊。這樣做的問題在於h3，因爲它小於h2，所以它的中心位置是h2長度的一半。

h2有點像坐在hr上，h3有點像浮在半空中。

我有點想讓他們像坐在hr上一樣。

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

我說的是視覺描述情況。

來源

2012-12-31 Aditya Sastry

你能描述的最好方法是使用代碼。 – sachleen

向我們展示一些代碼，你有什麼嘗試？ –

你需要換兩個標題在div標記，有該div標籤使用的樣式是clear: both。 e.g：

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

具有的div標籤hr後，將確保它被推兩個標題下。

或者類似的東西。希望這可以幫助。

來源

2012-12-31 00:53:13 twilson

您應該只需要做的一個：

讓他們兩個inline（或inline-block）
將其設置爲float向左或向右

您應該能夠調整height,padding或margin小標題的屬性以補償其定位。我建議設置兩個標題具有相同的height。

查看此例live jsFiddle。

（中的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 />

來源

2012-12-31 00:52:37

我嘗試了保證金，填充一切，但浮動我猜不斷覆蓋他們 –

的CSS vertical-align屬性應該幫助你在這裏：

vertical-align: bottom;

是您需要爲您的小頭:)

Vertical-Align

來源

2012-12-31 00:54:26

嘗試它不工作..垂直對齊工程沒有浮動：右 –

檢查我的樣品溶液

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

這會將你的頁面分成兩部分，並插入兩個標題ele平等地左右部分。

來源

2014-05-23 10:00:46 Tibs

以下代碼將允許您在同一行上有兩個標題，即第一個左對齊和第二個右對齊，並且具有將兩個標題保持在同一基線上的附加優勢。

的HTML部分：

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

而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); 
}

來源

2018-02-18 05:57:00 ianmightknow

如何在html中的同一行上有兩個標題

回答

相關問題