如何使用CSS內聯元素

我試圖在我的網站頂部製作菜單欄。它應該像這樣looke：如何使用CSS內聯元素

紅色方塊是我的按鈕。

我的問題是我的標題和我的按鈕不在同一行。所以我試圖使用一張桌子，但是這兩張桌子都是左對齊的。之後，我用我的按鈕float: right;。它現在對齊，但在下一行。

我該如何解決這個問題，這樣我的按鈕和我的標題是在同一行，並像我的照片一樣對齊。

HTML：

<div id="topbar"> 
    <h1>Fahrplan</h1> 
    <button type="button" id="settings"></button> 
</div>

CSS：

h1 { 
    height: 44px; 
    margin: 0; 
    color:#FFFFFF; 
    text-align: center; 
    font-family: Helvetica, sans-serif; 
    font-size: 16px; 
    line-height: 44px; 
} 
#topbar button { 
    height: 20px; 
    width: 20px; 
    float: right; 
}

來源

2016-04-14 Paili

對於這種情況下，您可以考慮使用position秒。

#topbar { 
 
    position: relative; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    color:#FFFFFF; 
 
    text-align: center; 
 
    font-family: Helvetica, sans-serif; 
 
    font-size: 16px; 
 
    line-height: 44px; 
 
    background: #99f; 
 
} 
 
#topbar button { 
 
    height: 20px; 
 
    width: 20px; 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 5px; 
 
    margin-top: -10px; 
 
}

<div id="topbar"> 
 
    <h1>Fahrplan</h1> 
 
    <button type="button" id="settings"></button> 
 
</div>

在這裏，我已經給position既#topbar和按鈕。所述#topbar具有relative位置和按鈕具有absolute位置：

#topbar { 
    position: relative; 
} 
button { 
    position: absolute; 
    top: 50%; 
    right: 5px; 
    margin-top: -10px; 
}

我還調整通過使用一半高度的負緣垂直居中的按鈕。希望這可以幫助。

來源

2016-04-14 11:40:10

我不認爲使用'absolute'是一個不錯的選擇這裏，'float'將被閒置，相信OP不希望他的元素是滾動按鈕後面如果視口變小 –

@ Mr.Alien Right。我們也可以建議OP設置「最小寬度」或其他。 '：）' –

它可以工作但不會縮放，如果你有兩個按鈕？知道其他元素高度的CSS也很脆弱。說了這麼多，我過去用過它 –

我寧願建議您使用absolute連同translateY()將您的按鈕垂直對齊。

Demo

我使用position: absolute;到您的按鈕移動到右側（注：我使用上的jsfiddle SCSS所以不要混淆語法）

header { 
    height: 40px; 
    background: tomato; 
    position: relative; 

    h4 { 
    line-height: 40px; 
    text-align: center; 
    } 

    button { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    right: 10px; 
    } 
}

解釋。只要您的按鈕垂直居中，您可以使用top: 50%和transform將您的按鈕精確地垂直放在頁眉中間。它將始終保持垂直居中，而無需聲明任何靜態height。

來源

2016-04-14 11:48:32

哇。這看起來像一個混合。當你使用「位置」時......我很困惑。這是否工作？ –

非常感謝。一個非常好的解釋！ – Paili

@PraveenKumar'relative'對於頭部來說是多餘的，所以移動到絕對位置，但他不必使用更多的靜態高度來垂直居中按鈕。 –

-1

給你的標題浮動屬性;

.classNameGiveToHeading { 
    float: left; 
} 
.buttonClassName { 
    float: right; 
}

OR給予「浮動：權利」他們兩個只要你喜歡。

來源

2016-04-14 11:57:01 Atula

這將不起作用，因爲標題必須按照要求居中。 –

這裏是如何做到這一點使用http://tachyons.io

<div class="bg-light-gray dt w-100"> 
    <div class="dtc v-mid w3"></div> 
    <div class="dtc v-mid tc pv3"> 
    <h1 class="mv0 f5">Headline</h1> 
    </div> 
    <div class="dtc v-mid tr w3 pr2"> 
    <button class="bg-black br2 h2 w2"></button> 
    </div> 
</div>

CSS一個快速演示： .br2 { 邊界半徑。25rem; }

.dt { 
    display: table; 
} 

.dtc { 
    display: table-cell; 
} 

.h2 { 
    height: 2rem; 
} 

.w2 { 
    width: 2rem; 
} 

.w3 { 
    width: 4rem; 
} 

.w-100 { 
    width: 100%; 
} 

.bg-black { 
    background-color: #111; 
} 

.bg-light-gray { 
    background-color: #eee; 
} 

.pr2 { 
    padding-right: .5rem; 
} 

.pv3 { 
    padding-top: 1rem; 
    padding-bottom: 1rem; 
} 

.mv0 { 
    margin-top: 0; 
    margin-bottom: 0rem; 
} 

.tr { 
    text-align: right; 
} 

.tc { 
    text-align: center; 
} 

.f5 { 
    font-size: 1rem; 
} 

.v-mid { 
    vertical-align: middle; 
}

演示： https://jsfiddle.net/r21mdrzs/

的缺點是，你包括空div。好的一面是，即使你放大或縮小，改變字體大小或按鈕的大小，一切都將始終與中間對齊，無論如何。根據我的經驗，這比使用幻數值進行定位要脆弱。

來源

2016-04-14 12:08:43 mrmrs

爲了您的興趣，下面介紹如何使用內嵌塊。

div > * { 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
} 
 
h1 { 
 
    width:100%; 
 
    text-align:center; 
 
    margin-right:-40px; 
 
    background-color:#4F81BD; 
 
    color:#FFF; 
 
    font-family: Helvetica, sans-serif; 
 
    font-size: 16px; 
 
    height: 44px; 
 
} 
 
button { 
 
    height: 30px; 
 
    width: 30px; 
 
    margin-right:-6px; 
 
    border: 3px solid #8C3836; 
 
    border-radius:5px; 
 
    background-color:#C0504D; 
 
}

<div id="topbar"> 
 
    <h1>Fahrplan</h1> 
 
    <button type="button" id="settings"></button> 
 
</div>

來源

2016-04-14 12:22:45 Alohci

如何使用CSS內聯元素

回答

相關問題