把图像放在标题中（同一行）

I want to put 3 image's in the header, left is logo and right is search box.

我想在标题中放置3个图像,左边是徽标,右边是搜索框。

how can I put them in the same line?

我怎么能把它们放在同一条线上?

I want it so that its the logo on the left of the header and the search box is on the right..

我想要它的标题左侧的标识和搜索框在右边..

Please help.

#logo {
  float: left;
  margin-left: 10%;
  height: 30%;
  width: 20%;
}
#searchlogo {
  float: right;
  height: 30px;
  width: 30px;
  margin: 5px;
  position: relative;
  top: -5px;
}
/*search box*/

input.rounded {
  margin-left: 85%;
  border: 1px solid #ccc;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 2px 2px 3px #666;
  -webkit-box-shadow: 2px 2px 3px #666;
  box-shadow: 2px 2px 3px #666;
  font-size: 14px;
  font-family: Tahoma, Geneva, sans-serif;
  padding: 4px 7px;
  outline: 0;
  -webkit-appearance: none;
}
input.rounded:focus {
  border-color: #969063;
}

<header>
  <a href="main.html">
    <img id="logo" src="logo.gif" />
  </a>
  <input type="text" class="rounded" />
  <input type="image" id="searchlogo" src="searchbutton.png" />
</header>

2 个解决方案

#1

It's your margin-left:85% rule for the input.rounded class. Any reason why you need margin that is most of the screen width? If you remove that rule, everything lines up in one row.

这是你的左边缘:对于input.rounded类的85%规则。您需要大部分屏幕宽度的保证金的原因是什么?如果删除该规则,则所有内容都排成一行。

#2

You need to change the way the elements behave in terms of block and inline.

您需要根据块和内联更改元素的行为方式。

the below code should achieve what your looking for.

以下代码应该达到你想要的。

also your margin's where totally out of whack i have removed them from the equation and float.

还有你的保证金完全没有问题,我已将它们从等式中移除并浮动。

I've also added a few extra css rules to help you with this kind of thing in the future.

我还添加了一些额外的css规则来帮助你将来做这类事情。

.align {
  display: inline-block;
  *display: inline;
  zoom: 1;
  vertical-align: top;
}
.align-center {
  text-align: center;
}
.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}
.align-table {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.t-align {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}
#logo {
  height: 30%;
  width: 20%;
}
#searchlogo {
  height: 30px;
  width: 30px;
  margin: 5px;
  position: relative;
  top: -5px;
}
/*search box*/

input.rounded {
  border: 1px solid #ccc;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 2px 2px 3px #666;
  -webkit-box-shadow: 2px 2px 3px #666;
  box-shadow: 2px 2px 3px #666;
  font-size: 14px;
  font-family: Tahoma, Geneva, sans-serif;
  padding: 4px 7px;
  outline: 0;
  -webkit-appearance: none;
}
input.rounded:focus {
  border-color: #969063;
}

<header class="align-table">
  <div class="t-align">
    <a href="main.html">
      <img id="logo" src="logo.gif" />
    </a>
  </div>
  <div class="t-align align-right">
    <form class="align">
      <input type="text" class="rounded" />
      <input type="image" id="searchlogo" src="searchbutton.png" />
    </form>
  </div>
</header>

#1