親の直下にトグルされたdivを整列します

Question

トグルされたdivを親のすぐ下に整列させるのに少し問題があります。それは親の右上にやや上に現れるようです。

これは、エディタツールバー、テキストエディタのスタックオーバーフローおよびさまざまなフォーラムで使用するために使用します。

これを解決するための最も簡単で簡単な方法はわかりません。

$(document).on('click', ".editor-dropdown", function() { 
 
    $('.editor-dropdown-content', this).toggle(); // p00f 
 
});

.editor-dropdown { 
 
    background: #ffffff; 
 
    border: 1px solid #ddd; 
 
    cursor: pointer; 
 
    float: left; 
 
    padding: 5px 14px; 
 
} 
 

 
.editor-dropdown-content { 
 
    display: none; 
 
    z-index: 900; 
 
    position: absolute; 
 
    background: #ffffff; 
 
    border: 1px solid #ddd; 
 
    padding: 5px 14px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="editor-dropdown"> 
 
    Header 
 
    <b class="caret-down"></b> 
 
    <div class="editor-dropdown-content"> 
 
    <span class="dropdown-option" data-tag="h1">H1</span> H2 H3 H4 
 
    </div> 
 
</div>

例：https://codepen.io/anon/pen/JNQZzM

Answer 1

の下codepenを確認してください。すべてを整列させたい場合は、 "header"テキストを要素にしてborder/padding/etcを適用し、同じ方法でleft: 0; top: 100%;に設定して左揃えにし、 "header"

$(document).on('click', ".editor-dropdown", function() 
 
{ 
 
\t $('.editor-dropdown-content', this).toggle(); // p00f 
 
});

.editor-dropdown { 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
.dropdown-header { 
 
    background: #ffffff; 
 
    border: 1px solid #ddd; 
 
    cursor: pointer; 
 
    padding: 5px 14px; 
 
    display: inline-block; 
 
} 
 

 
.editor-dropdown-content { 
 
    display: none; 
 
    z-index: 900; 
 
    position: absolute; 
 
    background: #ffffff; 
 
    left: 0; 
 
    top: 100%; 
 
    border: 1px solid #ddd; 
 
    padding: 5px 14px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="editor-dropdown"> 
 
    <span class="dropdown-header">Header</span> 
 
    <b class="caret-down"></b> 
 
    <div class="editor-dropdown-content"> 
 
    <span class="dropdown-option" data-tag="h1">H1</span> H2 H3 H4 
 
    </div> 
 
</div>

Answer 2

Iは

.editor-dropdown-content 
{ 
display: none; 
z-index: 900; 
position:relative; 
background: #ffffff; 
border: 1px solid #ddd; 
padding: 5px 14px; 
left: 60; 
bottom: 100; 
} 

以下のようなCSSは、ヘッダの下に整列させることができた編集。あなたがそれをしたいメニューを置くためにtop/leftポジショニングを使用し、その後position: relativeに親を設定

https://codepen.io/anon/pen/xdoJKp

Answer 3

あなたが後にしている何本か？

$(document).on('click', ".editor-dropdown", function() 
 
{ 
 
\t $('.editor-dropdown-content').toggle(); // p00f 
 
});

.editor-dropdown 
 
{ 
 
\t background: #ffffff; 
 
\t border: 1px solid #ddd; 
 
\t cursor: pointer; 
 
\t padding: 5px 14px; 
 
    width: 200px; 
 
} 
 
.editor-dropdown-content 
 
{ 
 
\t display: none; 
 
\t background: #ffffff; 
 
\t border: 1px solid #ddd; 
 
\t padding: 5px 14px; 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="editor-dropdown">Header 
 
\t <b class="caret-down"></b> \t \t \t \t 
 
</div> 
 
<div class="editor-dropdown-content"> 
 
\t <span class="dropdown-option" data-tag="h1">H1</span> 
 
\t \t \t \t \t H2 
 
\t \t \t \t \t H3 
 
\t \t \t \t \t H4 
 
</div>

Answer 4

あなたは.editor-dropdown-contentに.editor-dropdown、その後left: 0;にposition: absolute;を追加してみてください。しかし

、より良いが、この1を見てみましょう.editor-dropdown

https://codepen.io/anon/pen/dWBjpQ

Answer 5

のうち.editor-dropdown-contentを取るためにおそらくありますか？

HTML：

<div class="editor-dropdown"> 
       Header 
    <b class="caret-down"></b> 
    </div> 
    <div class="editor-dropdown-content"> 
     <span class="dropdown-option" data-tag="h1">H1</span> 
     <span class="dropdown-option" data-tag="h1">H2</span> 
     <span class="dropdown-option" data-tag="h1">H3</span>   
     <span class="dropdown-option" data-tag="h1">H4</span> 
    </div> 

のCss：

.editor-dropdown 
{ 
background: #ffffff; 
border: 1px solid #ddd; 
cursor: pointer; 
padding: 5px 14px; 
} 
.editor-dropdown-content 
{ 
display: none; 
z-index: 900; 
top: 40px; 
background: #ffffff; 
border: 1px solid #ddd; 
padding: 5px 14px; 
} 

.dropdown-option { 
display:block; 
} 

Javascriptを：

$(document).on('click', ".editor-dropdown", function() 
{ 
$('.editor-dropdown-content').toggle(); // p00f 
}); 

https://codepen.io/anon/pen/ZKdjLJ

Answer 6

spanタグの下に "ヘッダ" のテキストを入れて、それをクラスを教えてください好きな以下：その後

<div class="editor-dropdown"> 
    <span class="dropdoanHeader">Header</span> 
    <b class="caret-down"></b> 
    <div class="editor-dropdown-content"> 
     <span class="dropdown-option" datatag="h1">H1</span> 
     H2 
     H3 
     H4 
    </div> 
</div> 

申し訳ありませんが、それは本当に奇妙な探して終わる親要素、内部でそれを維持終わるcssの

.editor-dropdown 
{ 
    background: #ffffff; 
    border: 1px solid #ddd; 
    cursor: pointer; 
    float: left; 
} 

.dropdoanHeader 
{ 
    padding: 5px 14px; 
} 

.editor-dropdown-content 
{ 
    position:absolute; 
    padding-left:10px; 
    background: #ffffff; 
    border: 1px solid #ddd; 
    padding: 5px 14px; 
}