使文本和按钮保持在同一行

Question

我正在尝试让文字和按钮保持在同一行

HTML

<div class="server">
      <div class="container">
        <div class="col-md-5">
        <div class="serverinfo"><p><b>Map:</b> ttt_minecraft_b5<br><b>Spillere:</b> 12/24</p>
            <p class="connect"><a href="#" class="btn btn-primary" role="button">Koble til</a> </p>
        </div>
        </div>
        </div>

CSS

.serverinfo {
    margin: 0 0 10px 0;
    padding: 4px;
    background-color: white;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
}

.connect {
    text-align: right;
}

Bootply

希望你们明白，不能包含图片

感谢您的帮助！

Answer 1

问题是您的链接按钮位于单独的p标签中。将链接按钮锚标记放在同一个p标记中。

<p>text here and stuff <a></a></p>

Answer 2

尝试：

.serverinfo {
margin: 0 0 10px 0;
padding: 4px;
background-color: white;
border-radius: 0 0 4px 4px;
overflow: hidden;
float: left;
}

.connect {
text-align: right;
float: left;
}

Answer 3

您可以删除连接选择器并将两个段落标记合并为一行，如：

<div class="server">
    <div class="container">
        <div class="col-md-5">
            <div class="serverinfo">
                <p><b>Map:</b> ttt_minecraft_b5
                    <br/><b>Spillere:</b> 12/24 
<a href="#" class="btn btn-primary" role="button">Koble til</a> 
                </p>
            </div>
        </div>
    </div>

<style>
.serverinfo {
    margin: 0 0 10px 0;
    padding: 4px;
    background-color: white;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
}
</style>

演示 Here 也许，这就是你所需要的。

或者，你需要这样吗？ 更新了Demo