Question

我需要在一个块中创建2个元素，但出于某种原因，“名称”和“ “鲍勃”被转移到另一条线。

HTML

<div class=".div" style="padding-left: 50px">
        <h3 style="padding-right: 5px;float: left;padding-bottom: 23px;">Name:</h3>
        <span class="pt_name" style="block">Bob</span>
</div>

CSS

#div{
    height:100px;
    width:100%;
    background-color:green
}

拨弄

http://jsfiddle.net/LMKw7/

Answer 1

h3隐含margin-top来自浏览器的默认样式表，它会将其推迟。只需设置margin-top: 0，您就会看到改进。

另外，我建议使用CSS而不是内联样式。

Answer 2

您将样式授予ID为div的div，因为您在开头使用了#。如果您想将其添加到每个div，只需使用div { ... }。

Answer 3

使用display:inline-block;

另外由于<h3>和<span>的字体大小不同，<span>内的文字显示在新行上。我编辑了你的小提琴。可能这可能对你有所帮助：

http://jsfiddle.net/LMKw7/2/

Answer 4

两件事：

我最好在h3上设置“display: inline-block;”，而不是“float: left”。

至于“div”的事情 - 你可能会在元素类型之后命名你的选择器而使自己感到困惑。无论如何，类通常没有点 - 点只是放在CSS中以便按类选择。＃标签用于ID。所以，正确的看法是：

<div class="myDiv" ...

（CSS）：

.myDiv {

在div中创建2个元素

4 个答案: