как сделать эту посадку в той же строке в css

Я хочу Набрать еду и Войти, зарегистрироваться в той же строке. Вход и регистрация должны находиться в правом углу той же линии, где набирается пища.как сделать эту посадку в той же строке в css

<body> 
    <div id="header"> 
     <h1 style="color: #FF9933; height: 25px; width: auto;">Dial A Food</h1> 
      <div id="user"> 
      <ul class="list-inline h5 mtm user-links"> 
       <li class="login"> 
        <a title="Log in" href="/member/login"> 
         <strong>Log in</strong> 
        </a> 
       </li> 
       <li class="signup"> 
        <a title="Sign up" href="/member/signup"> 
         <strong>Sign up</strong> 
        </a> 
       </li> 
      </ul> 
     </div>

Поскольку я начал учиться сейчас, пожалуйста, помогите мне.

источник

2013-12-19 curiousDev

Ну, ваш вопрос не совсем о «логине» и «регистрации». Это больше о форматировании списков. Если вы выполните поиск, связанный с «стилем списка» или с этим сходством, вы найдете много статей в Интернете и, скорее всего, на этом сайте. – Andrew

Вот простой пример:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style media="all"> 
    h1, ul, li {margin: 0; padding: 0;} 
    h1 {float: left; color: #FF9933;} 
    #user {float: right;} 
    ul {list-style: none;} 
    ul li {float: left; padding-left: 20px;} 
</style> 
</head> 
<body> 
    <div id="header"> 
     <h1>Dial A Food</h1> 
     <div id="user"> 
      <ul class="list-inline h5 mtm user-links"> 
       <li class="login"> 
        <a title="Log in" href="/member/login"> 
         <strong>Log in</strong> 
        </a> 
       </li> 
       <li class="signup"> 
        <a title="Sign up" href="/member/signup"> 
         <strong>Sign up</strong> 
        </a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html>

источник

2013-12-19 06:38:02

div, h1 и li являются блочные элементы таким образом сделать его рядный

#header, #user, h1, li{ 
    display:inline-block 
}

DEMO

источник

2013-12-19 06:31:21 Sowmya

поскольку ваш «набрать пищу» находится в H1 теге, а остальные два элемента находятся в пределах список, они не могут находиться на одной линии без специального стиля и позиционирования.

В li элементы могут быть на той же строке, если вы добавить CSS в код:

Css

#header, #user, h1, li { 
    display:inline; 
    padding:10px; 
}

источник

2013-12-19 06:33:27 Phlume

Попробуйте это:

body,html{height:100%;width:100%;margin:0;} 
h1{float:left;} 
#user{float:right;} 
#user li{display:inline-block;} 
#header{width:100%;} /* remove width from html markup */ 
.clr{clear:both;}

Ясно floats в конце:

<div class="clr"></div>

DEMO here.

источник

2013-12-19 06:35:29 Hiral

upvote для демо –

@Amarnath спасибо :) – Hiral

HTML

<div id="wrapper"> <div id="header"> 
     <h1 style="color: #FF9933; height: 25px;">Dial A Food</h1> 
      <div id="user"> 
      <ul> 
       <li> <a title="Log in" href="/member/login">      <strong>Log in</strong> </a> </li> 
       <li > <a title="Sign up" href="/member/signup"> 
         <strong>Sign up</strong> </a> </li> 
      </ul> 
    </div> 
    </div>

CSS

#wrapper 
{ 
    width:700px; 
} 
#header , h1 
{ 
    display:inline:block; 
    float:left; 
    } 
#user, ul , li,a 
{ 
    display:inline:block; 
    float:right; 
    padding:5px; 
    list-style:none; 
    text-decoration:none; 
}

Fiddle Demo Here

источник

2013-12-19 06:45:27

как сделать эту посадку в той же строке в css

ответ

Смежные вопросы