Question

目前我的搜索栏位于导航栏中但位于不同的行，我想知道为什么会这样做。即使我将写入更小并改变填充和边距，我也保持不变。我在课堂上这样做这是我的代码所有帮助表示赞赏

<!--

#navbar ul {
    margin: 0;
    padding-right: 5px;
    list-style-type: none;
    text-align: center;
    background-color: #fafafa;
    font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
    font-size: 29px;
    }

#navbar ul li {
    display: inline;
    }

#navbar ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #000;
    background-color: #fafafa;
    }

#navbar ul li a:hover {
    color: #000;
    background-color; #fff;
}
-->
</style>
</head>
<body>
<div id="navbar">
<ul>
    <li><a href="default.html">Home</a></li>
    <li><a href="rowing.html">Rowing</a></li>
    <li><a href="school.html">School</a></li>
    <li><a href="attractions.html">Attractions</a></li>

<form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
  <input type="hidden" name="cref" value="" />
  <input type="hidden" name="ie" value="utf-8" />
  <input type="hidden" name="hl" value="" />
  <input name="q" type="text" size="40" />
  <input type="submit" name="sa" value="Search" />
 </form>
<script type="text/javascript" src="https://www.google.com/cse/tools/onthefly?         form=searchbox_demo&lang="></script>

    </ul>

    </div>

Answer 1

因为是块级元素，并且默认情况下块级元素以新行开头。这就是为什么在这种情况下，包含搜索栏会转到新行 - 在导航栏下。通过使其显示为内联元素，将与<li>元素保持在同一行，正如您在上面的样式中所看到的那样，它们也设置为显示为内联元素。

把它放在你的CSS中：

form{
   display:inline;
}

导航链接和搜索栏不在同一行

1 个答案: