html - 使 img 和 input 正确排列并在 html 中向右浮动

Question

我想要一个相对简单navbar的，它有一个搜索图标是对的。单击该图标会在其左侧显示一个隐藏的搜索输入。

在对其他一些解决方案（例如使用“浮动”或“空白”）感到沮丧后，我尝试遵循此处的建议。

如果您查看单击后的图片，您会看到图像的纵横比发生了变化。

这样做的正确方法是什么？

代码：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

<div id="topnav">
  <ul>
    <li><a href="#home">Top Questions</a></li>
    <li style="float:right;">
      <div style="display:flex;flex-direction:row">
        <form><input type="search" id="mySearch" placeholder="Search..." style="display:none;width:200px"></form>
        <img src="search-icon-24.png" alt="" id="searchicon" />
      </div>
    </li>
  </ul>
</div>

标签： htmlcssnavbar

Answer 1

使用 flexbox 进行布局。如果你想有相同的宽度，使用flex: 1

结构

HTML

<div class="row">
  <div>50%</div>
  <div>50%
    <input ...>
    <button><img ...></button>
  </div>
</div>

CSS

.row {
  display: flex;
}

.row > div {
  flex: 1;
}

在里面制作第二个 div.row并在右侧设置内容。display: flexjustify-content: flex-end

.row > div:nth-child(2) {
  display: flex;
  justify-content: flex-end;
}

JavaScript

向 click 元素添加事件侦听器。每次单击元素时，目标元素都会切换。切换el.classList.toggle(cssClass)

---

没有效果的例子

function myToggle(clickElId, targetElId, cssClass) {
  var clickEl = document.getElementById(clickElId),
    targetEl = document.getElementById(targetElId);
  clickEl.addEventListener("click", function() {
    targetEl.classList.toggle(cssClass);
  });
}

myToggle("searchButton", "mySearch", "hide");

/* Flexbox */

.flex {
  display: flex;
}

.flex.is-right {
  justify-content: flex-end;
}

.flex.is-v-centered {
  align-items: center;
}

.flex.equal>* {
  flex: 1;
}


/***/

#topnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  padding: 0 15px;
  height: 40px;
}

#topnav a {
  color: white;
  text-decoration: none;
}

#mySearch,
#searchButton {
  display: block;
  height: 30px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#mySearch {
  margin-right: 5px;
}


/* Hide search input without effect */

.hide {
  display: none !important;
}


/* Hide search input with effect */

.width-0 {
  width: 0;
  padding: 0;
  border: none;
  transition: width .3s ease;
}

.expand-200 {
  width: 200px;
}

<div id="topnav">
  <ul class="flex equal is-v-centered">
    <li><a href="#home">Top Questions</a>
    </li>
    <li class="flex is-right is-v-centered">
      <div>
        <form class="flex" onsubmit="return false;">
          <input type="text" id="mySearch" class="hide expand-200" placeholder="Search...">
          <!-- <img src="search-icon-24.png" alt="" id="searchicon">-->
          <button id="searchButton"><img src="http://via.placeholder.com/30x30" alt=""></button>
        </form>
      </div>
    </li>
  </ul>
</div>

有效果的例子

function myToggle(clickElId, targetElId, cssClass) {
  var clickEl = document.getElementById(clickElId),
    targetEl = document.getElementById(targetElId);
  clickEl.addEventListener("click", function() {
    targetEl.classList.toggle(cssClass);
  });
}

myToggle("searchButton", "mySearch", "expand-200");

/* Flexbox */

.flex {
  display: flex;
}

.flex.is-right {
  justify-content: flex-end;
}

.flex.is-v-centered {
  align-items: center;
}

.flex.equal>* {
  flex: 1;
}


/***/

#topnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  padding: 0 15px;
  height: 40px;
}

#topnav a {
  color: white;
  text-decoration: none;
}

#mySearch,
#searchButton {
  display: block;
  height: 30px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#mySearch {
  margin-right: 5px;
}


/* Hide search input without effect */

.hide {
  display: none !important;
}


/* Hide search input with effect */

.width-0 {
  width: 0;
  padding: 0;
  border: none;
  transition: width .3s ease;
}

.expand-200 {
  width: 200px;
}

<div id="topnav">
  <ul class="flex equal is-v-centered">
    <li><a href="#home">Top Questions</a>
    </li>
    <li class="flex is-right is-v-centered">
      <div>
        <form class="flex" onsubmit="return false;">
          <input type="text" id="mySearch" class="width-0" placeholder="Search...">
          <!-- <img src="search-icon-24.png" alt="" id="searchicon">-->
          <button id="searchButton"><img src="http://via.placeholder.com/30x30" alt=""></button>
        </form>
      </div>
    </li>
  </ul>
</div>