Question

当我在我的网站上工作时，我走向了一个问题。我希望得到＆lt; .p＆gt;直接在我的＆lt; .a＆gt;之后的元素元素，所以它不是一条线。

现在如何：

Login 
\
Register

我的理解方式：

Login \
Register

如果您想查看一下，可以访问我的网站：

v14rkoende.helenparkhurst.net

这是我的HTML代码：

<div class=logreg>

        <div class=logregb>

            <p class=loginl ><a href=login.html class=loginr>Login</a> /</p>
            <p class=loginl ><a href=register.html class=loginr>Registreer</a></p>

        </div>

    </div>

这是我的CSS代码：

.loginr {
    font-family: Century Gothic;
    color: white; 
    font-size: 12px;
    margin-bottom: 0px;
    margin-top: 0px;
    text-decoration: underline;
}

.loginl {
    font-family: Century Gothic;
    color: white; 
    font-size: 12px;
    text-decoration: none;
    margin: 0px;
}

.logreg {
    margin-left:-20px;
}

.logregb {
    width: 0px;
    margin-left: auto ;
    margin-right: auto ;
    margin-top: -40px;
}

感谢您帮助我

解决方法是让宽度更大，例如：

 .logregb {
    width: 100px;
    margin-left: auto ;
    margin-right: auto ;
    margin-top: -40px;
}

感谢所有人的快速发型！

Answer 1

试试这个（UNTESTED）：

.loginl a {
 float:left;
}

Answer 2

父DOM元素的宽度很小。删除.logregb {width: 0px;}，因为它会导致2个换行符。

<强>替代地

将nowrap添加到您的CSS中，如下所示：

.loginl {
    [...]
    white-space: nowrap;
}

这是JSFiddle：http://jsfiddle.net/j3t47pqg/1/

Answer 3

p a {
 display:inline-block;
}

<div class=logreg>
    <div class=logregb>
        <p class=loginl >
            <a href=login.html class=loginr>Login</a>
            <a href=register.html class=loginr>Registreer</a>
        </p>
    </div>
</div>

如何在<a> element without placing it on a new line</a> </p>之后直接放置<p>元素

3 个答案: