два деления на каждой стороне на одной линии

Question

Как мне сделать так, чтобы он оставался на одной линии? Я хочу "Как дела?" находиться в той же строке, что и меню.

<div class="header">

<b>How ya doin?</b>

<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Support</a></li>
</ul>

</div>

CSS:

* { margin: 0; padding: 0; }

.header {
background: #CCC;
font-weight: bold;
padding: 5px 5px 3px 16px;
}

ul {
padding-left: 10px;
color: #444;
list-style: none;
margin: 0px 0px 5px 10px;
}

.menu {
font-weight: normal;
background: #CCC;
color: #000;
text-align: right;
}

.menu li {
display: inline;
margin-right: 8px;
}

Вот что я получаю:

Answer 1

Попробуйте

ul {
    display:inline;
    /* ... */
}

Answer 2

Я бы дал ширину b и ul, скажем, 50% для облегчения, затем плавал один вправо и один влево.

Вам понадобится div, чтобы потом очистить его, чтобы исправить макет.

Что-то вроде:

.header b {
    width:50%;
    float:left;
}

.header ul {
    width:50%;
    float:right;
}

затем под

<div style="clear:both"></div>

чтобы не запутаться.

Answer 3

ul является элементом блока, поэтому по умолчанию он начинается с новой строки, занимая 100% доступной ширины. Вы должны сказать ему, чтобы он вел себя по-другому.

Проще всего установить display: inline; на элементе ul.

Другой способ - установить float: left; на <b> и <ul> и дать им обоим width.

Если вы выберете последний подход (float), вам нужно будет указать .header, чтобы он содержал float. Самый простой способ сделать это - height: 1%; overflow: hidden;.

Answer 4

Я изменил ваш CSS на это, и, похоже, он добился цели (отмечены дополнения):

* { margin: 0; padding: 0; }

.header {
background: #CCC;
font-weight: bold;
padding: 5px 5px 3px 16px;
float:left; /* ADDED */
width:100%; /* ADDED */
}
b {
float:left; /* ADDED */
}
ul {
padding-left: 10px;
color: #444;
list-style: none;
margin: 0px 0px 5px 10px;
}

.menu {
font-weight: normal;
background: #CCC;
color: #000;
text-align: right;
}

.menu li {
display: inline;
margin-right: 8px;
}

Answer 5

<div class="header">

<!-- float to left -->
<b style="float: left;">How ya doin?</b>

<!-- float to right, or you can add float to .menu in css -->
<ul style="float: right;" class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Support</a></li>
</ul>

<!-- clearing float -->
<br style="clear:both;" />

</div>

Answer 6

как насчет использования абсолютных / относительных позиций? это действительно простое и приятное решение для текста заголовка, также легко добавлять другие элементы

.header{
    position: relative;
}

.header > b{
    position: absolute;
    left: 10px;
    top: 5px;
}

.header > ul{
    position: absolute;
    top: 5px;
    right: 10px;
}

Answer 7

что-то вроде:

.header b{display:block; width: 100px; float:left}

.menu {width:150px; float:left}

Удачи