HTML元素不在同一行

Question

我知道這個問題在這里被問了一個TON，但是我覺得這個特定問題的解決方案會根據圍繞CSS的元素而有很大不同。

無論如何，我在這里有一塊jQuery：

$(".classDiv").append("<h4>"+name+"</h4> - <h5>"+teacher+"</h5>");

而我的HTML / CSS：

<div class="classDiv" style="margin-top: 100px;"></div>

.classDiv {
    margin: 0 0 20px; 
    padding: 5px 0 0; 
    border: 1px solid #d8d8d8; 
    background: #f9f9f9;     
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    -moz-box-shadow: inset 0 0 0 1px #fff;
    -webkit-box-shadow: inset 0 0 0 1px #fff;
    box-shadow: inset 0 0 0 1px #fff; 
}

我希望我的名字和老師的文字都在同一行。 我已經嘗試過使用display: inline-block:周圍的div這樣的方法，但是它似乎不起作用。

這是正在發生的事情：

Answer 1

在這里使用<h4>和<h5>完全不合適。

如果需要，可以使用<span> s和一個class來設置它們的樣式。

Answer 2

我建議使用不同於h4和h5的東西。 進行相同操作，但改用span
$(".classDiv").append("<span class="my-name">"+name+"</span> - <span class="teacher">"+teacher+"</span>");

如果要設置樣式，只需給它們提供類並使用CSS字體屬性即可。

GL，享受

Answer 3

默認情況下，諸如h4和h5之類的標頭元素具有一塊顯示。 與內聯元素不同，塊級元素彼此堆疊，而內聯元素則在頁面流中彼此堆疊。 如果更改CSS以使h4和h5分別成為內聯元素，則它們將彼此相鄰放置：

.classDiv h4, .classDiv h5 {
    display: inline; /* or inline-block would work too */
}