时间戳

首页 > 解决方案 > 如何将文本框放在图像旁边

html - 如何将文本框放在图像旁边

问题描述

我目前正在制作一个网站，并且正在尝试向导航栏添加一个文本框。这是我的 HTML 和 CSS：

* {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #323232;
}

.navbar {
  background-color: #000000;
  width: 100%;
  height: 50px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: block;
}

.search {
  /*empty*/
}
<div class="navbar">
  <img src=https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclipground.com%2Fimages%2Fguy-writing-clipart-transparent-no-watermark-3.png&f=1&nofb=1 height="50">
  <div class="search">
    <input type="text" name="search" placeholder="search" style="left: 100;">
  </div>
</div>

标签： htmlcss

解决方案

这应该足够了。

.search{
  display: inline-block;
}

或者你可以使用 flexbox，甚至更好。

.search {
    display:flex;
    align-items:stretch;
}


* {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #323232;
}

.navbar {
  background-color: #000000;
  width: 100%;
  height: 50px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: flex;
}

.search {
    display:flex;
    align-items:stretch;
}
<div class="navbar">
  <img src=https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclipground.com%2Fimages%2Fguy-writing-clipart-transparent-no-watermark-3.png&f=1&nofb=1 height="50">
  <div class="search">
    <input type="text" name="search" placeholder="search" style="left: 100;">
  </div>
</div>

推荐阅读