如何将 <p> 元素直接放在 <a> 元素之后而不将其放在新行上答案

【问题标题】：How to put an <p> element directly after an <a> element without placing it on a new line如何将 <p> 元素直接放在 <a> 元素之后而不将其放在新行上
【发布时间】：2014-11-14 03:57:01
【问题描述】：

当我在我的网站上工作时，我遇到了一个问题。我想在我的 <.a> 元素之后直接有 <.p> 元素，所以它不是它下面的一行。

现在怎么样了：

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;
}

感谢所有人的快速遮阳篷！

【问题讨论】：

你应该在类、链接等处添加和关闭这些“”
那么您应该使用显示为inline 元素的元素，而不是显示为block 元素的元素。正在用 css 改变这种行为。
我建议使用 span 而不是 p（段落）。
@Akshay 您只需要在属性值周围加上引号，例如值中的一个空格。否则没有必要。
@t.niese 这不是问题所在。

标签： html css line next

【解决方案1】：

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

或者

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

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

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

【讨论】：

确实有效！我只需要使宽度更大。愚蠢的我 D：谢谢先生！
如果有效，请给正确答案加分吗？

【解决方案2】：

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>

【讨论】：

这样合法吗？我从来没有想过这样做。段落是块级元素，因此使其成为内联块合法吗？我没有立即在规范中找到任何内容。
@Rob 为什么将块元素切换为inline 是不合法的？它不是最好的艺术，但有时它可能很有用。
@algorhythm 因为它不是最好的艺术。或者，也许规范说你不能。我还没找到原因。
@Rob 你可以，这是可能的。您可以获得p 元素来执行span 元素所做的事情，反之亦然。有时您有无法更改的自动生成的 HTML，而不是像这样去做。
@algorhythm 虽然你可以让它工作，但这并不意味着它是合法的。这就是我所质疑的（并且还没有调查）。

【解决方案3】：

试试这个（未测试）：

.loginl a {
 float:left;
}

【讨论】：

想一想为什么是断行。原因是父元素的宽度小于文本“login”的宽度，因此“/”自动在下一行。 { float: left; } 有效，但最好使父级更宽或使用nowrap 防止换行。