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>和class来设置更大的样式。

Answer 2

我建议使用与h4和h5不同的东西。执行相同但使用跨度而不是$(".classDiv").append("<span class="my-name">"+name+"</span> - <span class="teacher">"+teacher+"</span>");

如果你想给它们设置样式，只需给它们分类并使用css字体属性。

G1并享受

Answer 3

h4和h5等标题元素默认显示块。块级元素堆叠在彼此之上，而不是内联元素，它们在页面流中彼此相邻堆叠。如果您更改CSS以使h4和h5成为内联元素，它们将彼此相邻：

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