主页 / 问题 / 806117
Accepted
118_64
Asked:2020-03-29 01:06:08 +0000 UTC2020-03-29 01:06:08 +0000 UTC

布置菜单时如何仅使最后一个列表项涂有橡胶涂层

  • 772

有一个基于列表项的菜单，其中最后一个有一个搜索字段。列表项（更准确地说是其中的文本）可以占据不同的宽度。

任务是确保带有输入表单的列表的最后一个元素占据分配给菜单的所有剩余空间。

.menu {
  height: 45px;
  width: 800px;
  position: absolute;
  top: 200px;
  left: 100px;
}

.menu ul {
  display: inline-block;
  width: auto;
  margin: auto;
}

.menu li:not(:last-child) {
  display: inline-block;
  width: auto;
}

.menu li.last {
  display: inline-block;
  margin: auto;
  width: 100%;
  /* происходит перенос элемента на следующую строку */
}

.menu a {
  height: 45px;
  padding: 0px 20px;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}

.form {
  display: inline-block;
  height: 38px;
  width: 100%;
}

.input {
  display: inline;
  width: 84%;
  /*  смещение под кнопку .button  */
  height: 100%;
}

.button {
  position: relative;
  left: -14%;
  width: 12%;
  height: 90%;
}
<div class="menu">
  <ul>
    <li><a href="/">Text 1</a></li>
    <li><a href="/2">Text_2</a></li>
    <li><a href="/3">Text_123</a></li>
    <li class="last">
      <form class="form">
        <input class="input" type="text"><input class="button" type="submit" value="&#128269;">
      </form>
    </li>
  </ul>
</div>

我以不同的方式排列它，尝试使用 flex，将输入表单移到列表之外，但结果是两件事之一：要么最后一个元素没有占用所有剩余空间，要么它换行到下一行。

请就解决此问题需要采取的措施提出建议。

html

2 个回答

  1. 看起来是 固定的

    不得不改变小提琴标记：https ://codepen.io/topicstarter/pen/xWYdBp?editors=1100 

    * {
  margin: 0;
  padding: 0;
}

body {
  padding: 0 4px;
}

ul,
.items {
  display: flex;
  align-items: center;
}

li {
  text-align: center;
  list-style-type: none;
  padding: 4px 20px;
  background: lightgreen;
}

li a {
  text-decoration: none;
  font-variant: small-caps;
}

form {
  width: 100%;
  position: relative;
}

input[type="search"] {
  display: block;
  width: 100%;
}

button {
  border: none;
  outline: none;
  position: absolute;
  right: 0;
  top: 0;
  background:none;
}
    <div class="items">
  <ul>
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
  </ul>
  <form action="">
    <input type="search">
    <button> &#128269; </button>

  </form>
</div>

    • 1
  2. Best Answer

    老式的方式 - 用一张桌子：

    .menu {
  height: 45px;
  width: 800px;
  position: absolute;
  top: 100px;
  left: 10px;
}

.menu ul {
  display: table;
  width: auto;
  margin: auto;
}

.menu ul li {
  display: table-cell;
  white-space: nowrap;
}

.menu li:not(:last-child) {
  width: auto;
}

.menu li.last {
  margin: auto;
  width: 100%;      
}

.menu a {
  height: 45px;
  padding: 0px 20px;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}

.form {
  display: inline-block;
  height: 38px;
  width: 100%;
}

.input {
  display: inline;
  width: 84%;
  /*  смещение под кнопку .button  */
  height: 100%;
}

.button {
  position: relative;
  left: -14%;
  width: 12%;
  height: 90%;
}
    <div class="menu">
  <ul>
    <li><a href="/">Text 1</a></li>
    <li><a href="/2">Text_2</a></li>
    <li><a href="/3">Text_123</a></li>
    <li class="last">
      <form class="form">
        <input class="input" type="text"><input class="button" type="submit" value="&#128269;">
      </form>
    </li>
  </ul>
</div>

    柔性：

    .menu {
  height: 45px;
  width: 800px;
  position: absolute;
  top: 200px;
  left: 100px;
}

.menu ul {
  display: flex;
  width: auto;
  margin: auto;
  list-style: none;
}

.menu li:not(:last-child) {
  white-space: nowrap;
}

.menu li.last {
  margin: auto;
  width: 100%;
  /* происходит перенос элемента на следующую строку */
}

.menu a {
  height: 45px;
  padding: 0px 20px;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}

.form {
  display: inline-block;
  height: 38px;
  width: 100%;
}

.input {
  display: inline;
  width: 84%;
  /*  смещение под кнопку .button  */
  height: 100%;
}

.button {
  position: relative;
  left: -14%;
  width: 12%;
  height: 90%;
}
    <div class="menu">
  <ul>
    <li><a href="/">Text 1</a></li>
    <li><a href="/2">Text_2</a></li>
    <li><a href="/3">Text_123</a></li>
    <li class="last">
      <form class="form">
        <input class="input" type="text"><input class="button" type="submit" value="&#128269;">
      </form>
    </li>
  </ul>
</div>

    • 0

相关问题