[英]Align two elements on the same line
I am trying to align two different <p>
elements on the same line. 我试图在同一行上对齐两个不同的
<p>
元素。 I got it to work but it completely messed up my logo. 我可以使用它,但是它完全弄乱了我的徽标。 The two
<p>
elements are the "TEST"s you see on either side of the logo. 两个
<p>
元素是您在徽标两侧看到的“ TEST”。
The code for the alignment is this : HTML CODE 对齐的代码是这样的: 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 的CSS
#countr{display:inline-block;float:right;}
#countl{display:inline-block;left:35px;float:left;}
Your <p>
are: 您的
<p>
是:
<p style="color:white;" id="countr">test</p>
<p style="color:white;" id="countl">test</p>
Use this: 用这个:
#countr, #countl {
display: inline-block;
}
If doesn't work, then you can use this for countr
如果不起作用,则可以将其用于
countr
#countr {
float: left;
}
This will make them float inline! 这将使它们浮动内联!
If I were you I would get rid of ALL of the div align="center"s from your HTML, just have every element without them. 如果我是你,我将摆脱HTML中的所有div align =“ center”元素,让每个元素都没有它们。 And then the float should work better.
然后浮子应该会更好地工作。 Even better, you might just want to position: absolute;
更好的是,您可能只想定位:绝对; each of the TEST texts
每个测试文本
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.