0

ヘッダーを配置しようとしています。左右に前後の矢印があり、真ん中にタイトルがあります。タイトルが広すぎる場合、矢印の下に表示したいのですが...どうすればいいのかわからない! フレックスボックスをいじってみましたが、あまり得意ではありません。

ビジュアル：

              <     Title     >

になる：

              <               >
              Super Wide Title!

ここにコードペンがあります: http://codepen.io/wulftone/pen/KHkud

これは可能ですか？

4

2 に答える 2

1

まあ、思ったより簡単に終わりました。

HTML（スリム）は次のとおりです。

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

そしてCSS（sass）：

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

古き良きフロートが再びその日を救った！これが他の誰かに役立つことを願っています。

于 2013-11-15T03:03:31.957 に答える
1

HTMLの並べ替えやいくつかのフロートの使用を気にしない場合は、フレックスボックスなしで実行できます。これは、それを示すコードペンです。次の構造を使用します。

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;
}
于 2013-11-15T03:04:16.813 に答える