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>

第三个元素在其余部分

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个元素都正确放置

Answer 2

减少左边距值：

#vbottomdevelopment
{
    color:black;
    margin-left:500px;
    display:inline-block;
    clear:none;
}

Answer 3

我想知道为什么你使用margin-left来横向放置所有元素。您将在以后严重改变它，因为如果窗口大小减小，它将启用水平滚动。换句话说，您的网页永远不会响应。

删除所有margin-left属性并以百分比形式给出一些宽度，使得所有块的总宽度保持小于窗口宽度的100％。这将确保即使用户缩小窗口大小，您的元素也将处于正确的位置。

Check DEMO here

HTML

  <h4 id="vbottomcreator" class="vbottom"><a style="color:orange;">></a> Created by <a style="color:orange;"><</a></h4>

  <h4 id="vbottomdates" align="center" class="vbottom"><a style="color:orange;">></a> tasdf <a style="color:orange;"><</a></h4>

  <h4 id="vbottomdevelopment" class="vbottom"><a style="color:orange;">></a> Website still in Development <a style="color:orange;"><</a></h4>

CSS

#vbottomdates
{
    color:black;
    display:inline-block;

}
#vbottomcreator
{
    color:black;
    display:inline-block;
}
#vbottomdevelopment
{
    color:black;
    display:inline-block;
    clear:none;
}

.vbottom {
    width : 30%;
}

Html同一行上的三个元素

3 个答案: