css - CSS：当它太宽时，中心列向下移动的三列

Question

我正在尝试布置标题。它的左右两侧有前后箭头，中间有一个标题。当标题太宽时，我希望它出现在箭头下方......不知道该怎么做！我尝试过使用 flex-box，但我并不擅长。

视觉的：

              <     Title     >

变成：

              <               >
              Super Wide Title!

这是一个代码笔：http: //codepen.io/wulftone/pen/KHkud

这甚至可能吗？

Answer 1

好吧，这最终比我想象的要容易。

这是 HTML（超薄）：

ul
  li.one 1
  li.three 3
  li.two Super Long Title!

和CSS（萨斯）：

ul
  padding: 0
  margin: 0
  color: white
  font-weight: bold
  font-size: 3em
  text-align: center
  list-style: none

li
  background: tomato
  padding: 5px
  width: 200px
  height: 150px
  line-height: 150px

.three
  float: right

.one
  float: left

li.two
  width: auto
  display: inline-block

http://codepen.io/wulftone/pen/GbLHI

好旧的花车再次拯救了这一天！我希望这对其他人有帮助。

Answer 2

如果您不介意重新排序 html 并使用一些浮点数，则可以不使用 flexbox。这是一个显示. 它使用这种结构：

HTML

<ul>
  <li class="one">1</li>
  <li class="three">3</li>
  <li class="two">2</li>
</ul>

关键 CSS

这只是获得中心下拉所需功能的关键 css。

ul {
  text-align: center;
}

li {
  display: inline-block;
}

.one {
  float: left;
}

.three {
  float: right;
}