Question

我想拨打食物并登录，在同一行注册。登录和注册应位于拨打食物的同一行的右上角。

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

由于我现在才开始学习，请帮助我。

Answer 1

div，h1和li是块元素，因此请将其内联

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

<强> DEMO

Answer 2

试试这个：

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.

Answer 3

这是一个基本的例子：

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

Answer 4

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

Answer 5

因为你的＆＃34;拨打食物＆＃34;在H1标记中，其他两个元素在列表中，如果没有特定的样式和定位，它们就不能在同一行上。

如果您将此css添加到代码中，li元素可以位于同一行：

CSS

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

如何使这适合在CSS中的同一行

5 个答案: