Question

我有一个布局，其中有一个按钮两侧的按钮。内容介于按钮之间。

当视图足够大时，如何在按钮之间显示内容，但当内容开始与按钮之间的空间重叠时，如何下拉并填充剩余空间。

按钮是固定大小的

＆＃13;

nav ul li:first-child {

  float: left;

}

nav ul li:last-child {

  float: right;

}

nav ul li:first-child,

nav ul li:last-child {

  display: table-cell;

}

＆＃13;

<nav role="navigation">
  <ul>
    <li>
      <input type="submit" value="Back">
    </li>
    <li>
      <button>next</button>
    </li>
  </ul>
</nav>
<div id="content">
  <input type="text" />
  <input type="text" />
  <input type="text" />
</div>


<p>"#content" should extract itself from between buttons to next 'line' when page gets smaller, then when that is too small as well, it can start blocking up the inputs.</p>

＆＃13;

Answer 1

在这里小提琴：https://jsfiddle.net/8g25hjw5/

做这样的事情：

{{1}}

响应式设计：让中间的内容流入

1 个答案: