Question

我有导航，徽标和搜索栏，我想将它放在标题图片上方的一行中。有人可以指导我如何做到这一点吗？

scrollbar

Answer 1

我将剩余边距调整为与导航链接一致。认为它看起来不美观！

header {
  height: 830px;
  background-color: lightpink;
}
.container {
  height: 130px;
  width: auto;
  background-color: white;
  margin: 0px auto;
}
.logo {
  display: block;
  margin-left: 30px;
  margin-top: -70px;
  height: 63px;
  width: 220px;
  background-color: black;
  color: white;
  text-align: center;
  line-height: 45px;
  font-family: bernier_shaderegular;
  font-size: 60px;
  position: absolute;
}
.nav {
  display: inline-block;
  list-style: none;
  overflow: hidden;
  vertical-align: top;
}
.nav li {
  display: inline-block;
  vertical-align: top;
}
#searchbox {
  display: inline-block;
  vertical-align: middle;
  float: right;
}

<header>
  <div class="container">




    <ul class="nav">
      <li><a href="#">1</a>
      </li>
      <li><a href="#">2</a>
      </li>
      <li><a href="#">3</a>
      </li>
      <li><a href="#">4</a>
      </li>
    </ul>

    <form id="searchbox" action="">
      <input id="search" type="text" placeholder="Type here">
      <input id="submit" type="submit" value="Search">
    </form>
  </div>
  <div class="logo">logo</div>
</header>

Answer 2

元素排列的是float属性，我使用了你的代码并排列了元素。

提示：不要确定容器的高度或背景颜色，您将经常使用此选择器，因此他必须只具有定位功能。

代码[http://jsfiddle.net/furlanj1/kjh8brf1/][1]

Answer 3

我不明白你的问题。你想要这样吗？

CSS代码：

header {
    height: 830px;  
    background-color:lightpink;    
}

.container {
    height: 130px;
     width: auto;
    background-color: white;
    margin: 0px auto;
}

.logo {
    float: left;
    height: 63px;
    width: 220px;
    background-color: black;
    color: white;
    text-align: center;
    line-height: 45px;
    font-family: bernier_shaderegular;
    font-size: 60px;

}


.nav {
    float: left;
    list-style: none;
    overflow: hidden;

}

.nav li {
    display: inline-block;
}

Answer 4

这是你在找什么？

<强> CSS

http://jsfiddle.net/tdtopkoL/

div.header-wrapper-outer {
    width: 100%;
    height: 63px;
    background: #ff0000;
}
div.logo, div.navigation-wrapper {
    display: inline-block;
}
div.navigation-wrapper {
    vertical-align: top;
}
form#search {
    display:inline-block;
}
div.logo {
    background-color: #222;
    color: #fff;
    height: 63px;
    line-height:63px;
    width: 200px;
    font-size:60px;
    text-align: center;
}
ul.nav li {
    display: inline;
    list-style:none;
}

<强> HTML

<div class='header-wrapper-outer'>
    <div clas='header-wrapper-inner'>
        <div class='logo'>FM</div>
        <div class='navigation-wrapper'>
            <ul class='nav'>
                <li><a href='#'>About</a>
                </li>
                <li><a href='#'>Collections</a>
                </li>
                <li><a href='#'>Sales</a>
                </li>
                <li><a href='#'>Contact</a>
                </li>
                <li>
                    <form id='search' name='search'>
                        <input type='text' name='q' placeholder='Search' />
                    </form>
                </li>
            </ul>
        </div>
    </div>
</div>

如何将徽标，导航和搜索栏放在一条线上？

4 个答案: