jquery - 在同一行对齐两个元素

Question

我正在尝试<p>在同一行上对齐两个不同的元素。我让它工作，但它完全搞砸了我的标志。这两个<p>元素是您在徽标两侧看到的“TEST”。

对齐的代码是这样的： HTML CODE

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

CSS

#countr{display:inline-block;float:right;} 
#countl{display:inline-block;left:35px;float:left;}

Answer 1

你<p>是：

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

用这个：

#countr, #countl {
 display: inline-block;
}

如果不起作用，那么您可以将其用于countr

#countr {
float: left;
}

这将使它们内联浮动！

Answer 2

如果我是你，我会从你的 HTML 中删除所有 div align="center"s，只保留没有它们的每个元素。然后浮动应该更好地工作。更好的是，您可能只想定位：绝对；每个测试文本

Answer 3

小提琴

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