html 三个元素在同一行

Question

我试图将三个 h4 元素放在同一行上，我尝试使用 display:inline-block;在所有这些上，但只将两个元素放在同一行上，第三个元素在它们下面。

这是我的 HTML

            <h4 id="vbottomcreator"><a style="color:orange;">></a> Created by <a style="color:orange;"><</a></h4>
            <h4 id="vbottomdates" align="center"><a style="color:orange;">></a> tasdf <a style="color:orange;"><</a></h4>
            <h4 id="vbottomdevelopment"><a style="color:orange;">></a> Website still in Development <a style="color:orange;"><</a></h4>

第三个元素在rest之下

CSS

    #vbottomdates
    {
        color:black;
        display:inline-block;
        margin-left:362px;
    }
    #vbottomcreator
    {
        color:black;
        margin-left:30px;
        display:inline-block;
    }
    #vbottomdevelopment
    {
        color:black;
        margin-left:1100px;
        display:inline-block;
        clear:none;
    }

问题已解决

Answer 1

像这样尝试: Updated Demo

HTML:

<div class="center">
    <h4>...</h4>
     <h4>...</h4>
    <h4>...</h4>
</div>

CSS:

#vbottomdates {
    color:black;
    display:block;
    float:left;
}
#vbottomcreator {
    color:black;
    display:inline-block;
}
#vbottomdevelopment {
    color:black;
    display:block;
    float:right;
    display:inline-block;
}
.center {
    width:100%;
    margin:0 auto;
    display:inline-block;
    text-align:center;
}

最后一个 id 的边距值更大。尝试像这样减少值。所有 3 个元素都已正确放置