2

テキストと画像が結合されたボタンの垂直リストを表示しようとしています。position:relative と position:absolute を使用して、テキストを画像とマージしています。

<div class="well">
  <div style="position:relative;">
    <img src="assets/launch_item.png" style="position:absolute;"/>
      <div style="position:absolute;padding: 16px 0px 0px 55px;">
       <h5 style="float:left;width:300px;">Option1</h5>
        <a href="http://localhost:3000" style="padding: 0px 0px 0px 0px;"><div class="btn btn-success">Go</div></a>
      </div>
  </div>
  <div style="position:relative">
    <img src="assets/launch_item.png" style=position:absolute;"/>
    <div style="position:absolute;padding: 16px 0px 0px 55px;">
      <h5 style="float:left;width:300px;">Option2</h5>
      <a href="http://localhost:3000" style="padding: 0px 0px 0px 0px;"><div class="btn btn-success">Go</div></a>
    </div>
  </div>
</div>

結合されたボタンは問題ありませんが、親ウィンドウにボタンを配置する際に問題があるようです。上の画像に見られるように、2 つのボタンのうちの 1 つだけが表示されます。さらに、ボタンは「それに収まる」のではなく、既存のウィンドウに平手打ちされます。どうすれば修正できますか？

ここに画像の説明を入力

4

2 に答える 2

1

floatの内側を削除し、h5で制御しpositionます。すでにrelative親の配置を行っているため、残りの要素に対して行ったのと同じようDivに配置して、その中に要素を作成することをお勧めします。absoluteお役に立てれば。

編集

これが解決策です。

更新されたコード:

<div class="well" style="position:relative;">
  <div style="width:300px;">
    <img src="assets/launch_item.png" style="position:absolute;"/>
    <div style="position:absolute;padding: 8px 0px 0px 55px;">
      <h5 style="width:300px;position:absolute;">Option1</h5>
        <a href="http://localhost:3000" style="padding: 0px 0px 0px 250px;position:absolute"><div class="btn btn-success">Go</div></a>
    </div>
  </div>
  <div style="width:300px; left:305px; top:0; position:absolute;">
    <img src="assets/launch_item.png" style="position:absolute;"/>
    <div style="position:absolute;padding: 8px 0px 0px 55px;">
      <h5 style="width:300px;position:absolute;">Option2</h5>
        <a href="http://localhost:3000" style="padding: 0px 0px 0px 250px;position:absolute"><div class="btn btn-success">Go</div></a>
    </div>
  </div>
</div>

お役に立てれば。

編集 - 2

通常はメニュー用でUL、LI重要な役割を果たします。を使用したコードに問題のない効果があることを考えると、positionリスト項目はこれらのものにより便利です。リスト項目を垂直メニューとして使用する新しいソリューションを提供します。これは、リスト アイテムを使用したメニュー スタイルの作成について理解を深めるための参考資料のようなものです。お役に立てれば。

  • このリソースは、垂直メニューを使用したリスト アイテムの作成に関する調査中に使用されました。

これにより、作業が容易になることを願っています。:)

于 2013-05-17T05:43:29.110 に答える
0

overflow:hiddenクラスで div に適用しwellて、ボタンがその親 div に収まるようにします。

于 2013-05-17T05:53:37.020 に答える