Совместите два элемента на одной линии

Question

Совместите два элемента на одной линии

0

Я пытаюсь выровнять два разных элемента <p> в одной строке. Я получил его на работу, но он полностью испортил мой логотип. Два элемента <p> - это "ТЕСТ", которые вы видите по обеим сторонам логотипа.

Код для выравнивания следующий: 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;}

Rohith Varanasi 04 окт. 2013, в 04:18

Источник

1

Ваша разметка является более сложной, чем она должна быть. Поместите все три элемента в один контейнер, например, так: <div class="header"><div>TEST LEFT</div><div>LOGO HERE</div><div></div>TEST RIGHT</div></div> , затем примените некоторые стили, сделав их отображаемыми: inline-block, с процентной (или фиксированной) шириной, и эта компоновка проста для достижения.
cale_b 04 окт. 2013, в 01:54
0

Мне нравится ваш дизайн :), но я думаю, что синий цвет должен быть либо темнее, либо с более низким оттенком.
Mehran 04 окт. 2013, в 01:58
0

Ваша проблема только с выравниванием их по бокам? Похоже, что опубликованный код не похож ни на один из других разделов на скриншоте, оставляя проблему, о которой вы упоминаете.
PSL 04 окт. 2013, в 02:29

Показать ещё 1 комментарий

Теги:

jquery

html

css

3 ответа

0

Если бы я был вами, я бы избавился от ВСЕХ из div align = "center" s из вашего HTML, просто у вас есть все элементы без них. И тогда поплавок должен работать лучше. Еще лучше, вы можете просто хотеть положение: абсолютное; каждый текст ТЕСТ

russtuck91 03 окт. 2013, в 23:07

0

Ваши <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;
}

Это заставит их плавать в линию!

Afzaal Ahmad Zeeshan 03 окт. 2013, в 23:06

Ещё вопросы

Ваша разметка является более сложной, чем она должна быть. Поместите все три элемента в один контейнер, например, так: <div class="header"><div>TEST LEFT</div><div>LOGO HERE</div><div></div>TEST RIGHT</div></div> , затем примените некоторые стили, сделав их отображаемыми: inline-block, с процентной (или фиксированной) шириной, и эта компоновка проста для достижения.
Мне нравится ваш дизайн :), но я думаю, что синий цвет должен быть либо темнее, либо с более низким оттенком.
Ваша проблема только с выравниванием их по бокам? Похоже, что опубликованный код не похож ни на один из других разделов на скриншоте, оставляя проблему, о которой вы упоминаете.

vishalkin · Accepted Answer · 2013-10-04T01-14-00.000Z

FIDDLE

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