Jquery 在同一行上对齐两个元素

我试图在同一行上对齐两个不同的

元素。我让它工作，但它完全弄乱了我的标志。 两个

元素是您在徽标两侧看到的“测试”

路线的代码如下所示： HTML代码

<div id="logo" class="container">
<div align="center">        
    <img src="images/Logo.png" align="middle" alt="logo" height="105" width"105">
</div>
<div align="center">
 <p style="color:white;" id="countr">test</p> 
 <p style="color:white;" id="countl">test</p> 
</div>
    <h1 style="left:50px;"><span class="icon icon-size"></span><a href="#">Clubbed<span> In</span></a></h1>
<div align="center">
    <h2 class="motto" style="color : white">Connect. Communicate. Lead.</h2>
</div>

---

您的

是：

<p style="color:white;" id="countr">test</p> 
<p style="color:white;" id="countl">test</p> 

如果不起作用，则可将其用于
countr

#countr {
float: left;
}

这将使它们在线浮动
 如果我是你，我会从你的HTML中去掉所有的div align=“center”，只需要让每个元素都没有它们。然后浮子应该工作得更好。更好的是，你可能只想定位：绝对；每个测试文本


测试
测试
连接沟通。领导
您的标记比需要的更复杂。将所有三个元素放在同一个容器中，如下所示：
testleftlogo HERETEST RIGHT
，然后通过使它们各自显示来应用一些样式：具有百分比（或固定）宽度的内联块，这种布局很容易实现。我喜欢你的设计：）但我认为蓝色应该是较深或色调较低的。你的问题只是在两侧对齐吗？似乎发布的代码与屏幕截图中的任何其他部分都不一样，没有留下您提到的问题。
#countr, #countl {
 display: inline-block;
}

#countr {
float: left;
}

<div>
  <p style="color:black;float:left;" id="countr">test</p> 
 <p style="color:black;float:right;" id="countl">test</p> 
</div>
    <h1 align="center" style="margin:0 auto;clear:both;"><span class="icon icon-size"></span><a href="#">Clubbed<span> In</span></a></h1>
<div align="center">
    <h2 class="motto" style="color : black">Connect. Communicate. Lead.</h2>
</div>