直接在父項下面對齊切換div

Question

嘗試讓切換div直接在父項下對齊有點麻煩。它看起來似乎在右邊，稍微超過父母的頂部。

這將用於編輯器工具欄，文本編輯器stackoverflow和各種論壇使用。

不確定最好和最簡單的方法來解決它。

$(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

設置父position: relative然後使用top/left定位放到哪裏你想要的菜單。如果你希望一切都更好地對齊，我會將「標題」文本作爲一個元素，並將border/padding/etc應用於它，並以與設置爲left: 0; top: 100%;相同的方式設置菜單的樣式，將其左對齊並放在「標題」

$(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

我編輯象下面

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

之所以能夠對齊下面標頭中的CSS。檢查codepen下面

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

你可以嘗試添加position: absolute;到.editor-dropdown然後left: 0;到.editor-dropdown-content。

然而，更好的可能是採取.editor-dropdown-content出.editor-dropdown

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

Answer 5

的看看這一個？

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; 
}