在同一行和同一高度上左右浮動h2和h4

所以我只是試圖製作這個頭部，左邊是h2文本，右邊是h4，所以在同一行和高度上，以及一些填充，這是我的代碼：在同一行和同一高度上左右浮動h2和h4

.alignleft { 
 
    float: left; 
 
} 
 

 
.alignright { 
 
    float: right; 
 
} 
 

 
.nav { 
 
    clear: both; 
 
} 
 

 
.nav { 
 
    background-color: grey; 
 
}

<div class="nav"> 
 
    <h2 class="alignleft">Left side</h2> 
 
    <h4 class="alignright">RIGHT SIDE</h4> 
 
</div>

這裏的fiddle，任何幫助非常讚賞：

來源

2016-07-22 Joe

你只在寫的類名屬性，不與點前綴，所以你的代碼應該是：

<div class="nav"> 
    <h2 class="alignleft">Left side</h2> 
    <h4 class="alignright">RIGHT SIDE</h4> 
</div>

和行高增加了CSS：

.alignleft { 
    float: left; 
    line-height:25px; 
} 

.alignright { 
    float: right; 
    line-height:25px; /*or whatever px's you want*/ 
} 

.nav { 
    clear: both; 
    background-color: grey; 
}

來源

2016-07-22 22:51:34

哦，是對不起我的拼寫錯誤，但問題仍然存在，因爲正確的人會推高，這裏的新小提琴和編輯：https://jsfiddle.net/Lo1vxtj6/2/ – Joe

向css添加行高 –

或vertical-align：-5px; –

正如@MrGeek提到的，你應刪除類名稱前綴.。然後爲h2和h4元素分配相同的線高。

.alignleft { 
 
    float: left; 
 
} 
 

 
.alignright { 
 
    float: right; 
 
} 
 

 
.nav { 
 
    clear: both; 
 
} 
 

 
.nav { 
 
    background-color: grey; 
 
} 
 

 
h2, h4 { 
 
    line-height: 24px; 
 
}

<div class="nav"> 
 
    <h2 class="alignleft">Left side</h2> 
 
    <h4 class="alignright">RIGHT SIDE</h4> 
 
</div>

來源

2016-07-22 22:54:57

是的，它似乎在小提琴上工作，但它仍然需要一些調整我的網站，將檢查。謝謝！ – Joe

如果你能提供其他東西，你可以更新你的問題:) –

在同一行和同一高度上左右浮動h2和h4

回答

相關問題