在同一條線上獲得跨度和h3

這應該是如此簡單，但它卻躲過了我。我只想讓我的span和我的h3出現在同一行上，一行接一行，但它們出現在不同的行上。有人能幫我一些忙嗎？在同一條線上獲得跨度和h3

header { 
 
    background-color: black; 
 
    color: white; 
 
    padding: 10px; 
 
    width: 100% !important; 
 
    display: flex; 
 
} 
 

 
header .glyphicon { 
 
    font-size: 1.5em; 
 
    margin: 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<header> 
 
    <span class="glyphicon glyphicon-menu-hamburger"></span> 
 
    <h3>Home</h3> 
 
</header>

來源

2017-08-02 L.C.J

你只需要設置裏面display: inline-block;

header { 
 
    background-color: black; 
 
    color: white; 
 
    padding: 10px; 
 
    width: 100% !important; 
 
    display: flex; 
 
} 
 

 
header .glyphicon { 
 
    font-size: 1.5em; 
 
    margin: 5px; 
 
} 
 

 
header > span, 
 
header > h3 { 
 
    display: inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<header> 
 
    <span class="glyphicon glyphicon-menu-hamburger"></span> 
 
    <h3>Home</h3> 
 
</header>

來源

2017-08-02 16:38:22 dbrree

@Vadim奧夫欽尼科夫，你認爲加'inline'到'h3'是更好的做法？你認爲對兩個元素執行'inline-block'是不好的做法嗎？ – dbrree

將'inline'添加到'h3'並不那麼靈活，因爲您不能添加'邊距'，'寬度'，'高度'，'填充等等。但說實話，我更喜歡flexbox，因爲它阻止了它的所有子項目，並且有比inline-block更多的佈局選項。另外考慮從你的代碼中刪除'display：flex'，因爲你不打算使用它。 –

感謝您的洞察力。 – dbrree

h3元素是默認的塊級元素。 span是內聯的。

您的h3應該有display: inline，我們的inline-block。

https://jsfiddle.net/h81pkpne/1/

來源

2017-08-02 16:38:45 VictorGodoi

這是因爲瀏覽器應用默認樣式的h3元素。快速解決方法是將display: inline;樣式添加到h3。

header { 
 
    background-color: black; 
 
    color: white; 
 
    padding: 10px; 
 
    width: 100% !important; 
 
    display: flex; 
 
} 
 

 
header .glyphicon { 
 
    font-size: 1.5em; 
 
    margin: 5px; 
 
} 
 

 
h3 { 
 
    display: inline; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<header> 
 
    <span class="glyphicon glyphicon-menu-hamburger"></span> 
 
    <h3>Home</h3> 
 
</header>

來源

2017-08-02 16:39:09 ITDerrickH

你display: flex被引導display: block風格覆蓋。使用important或更具體的選擇器來覆蓋此選項。還要添加align-items: baseline以將flex-items放置在字體的基線上。

演示：

header { 
 
    background-color: black; 
 
    color: white; 
 
    padding: 10px; 
 
    width: 100% !important; 
 
    display: flex !important; 
 
    align-items: baseline; 
 
} 
 

 
header .glyphicon { 
 
    font-size: 1.5em; 
 
    margin: 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<header> 
 
    <span class="glyphicon glyphicon-menu-hamburger"></span> 
 
    <h3>Home</h3> 
 
</header>

順便說display: inline和display: inline-block解答工作，由於默認vertical-align: baseline屬性內聯元素。

來源

2017-08-02 16:45:44

哦，好的。我想知道爲什麼flex沒有做任何事情。欣賞它。 –

display: flex應該工作的樣子<header>正在normalize.css overiden到display: block所以應用類.header和H3去除餘量。使用內聯（或浮動）提供

其他的答案也將工作

.header { 
 
    background-color: black; 
 
    color: white; 
 
    padding: 10px; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
header .glyphicon { 
 
    font-size: 1.5em; 
 
} 
 

 
header h3 { 
 
    margin: 2px 0 0 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<header class="header"> 
 
    <span class="glyphicon glyphicon-menu-hamburger"></span> 
 
    <h3>Home</h3> 
 
</header>

來源

2017-08-03 17:40:37 Ben

在同一條線上獲得跨度和h3

回答

相關問題