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

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

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>

希望你们能理解，不能包括图片

---

谢谢你的帮助

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

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

这里的文本和其他内容

试试：

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

---

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

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

地图：ttt_minecraft_b5

斯皮尔雷：12/24

.serverinfo{
裕度：0 10px 0；
填充：4px；
背景色：白色；
边界半径：0 0 4px 4px；
溢出：隐藏；
}

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

或者，你需要像下面这样吗？ 更新

---

与ttt_minecraft_b5的线路相同，或者两条线路都相同？@JeanGkol这有关系吗？它不会在两者之间扩展吗？与ttt_minecraft_b5相同的一行如果对它们都使用段落，这将使按钮设置在一个新行中。您将在CSS中添加一个边距，在锚定标记中添加一个15px左右的边距

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