2017-11-30 14 views
1

アンカータグを使用する場合、ドロップダウンメニュー、ボタンの下方に配置されているが、ボタンを使用しながら、それがメニュー上にメニューバーボタンでアンカータグとボタンの動作が異なるのはなぜですか?

Anchor Tag implementation

<div class="menubar"> 
    <div class="dropdown"> 
    <button class="dropbtn">File 
     <i class="fa fa-caret-down"></i> 
    </button> 
    <div class="dropdown-content"> 
     <a href="#">New</a> 
     <a href="#">Open</a> 
     <a href="#">Save</a> </div> 
    </div> 
    <a>Edit</a> 
    <a>Tools</a> 
</div> 

Button implementation

<div class="menubar"> 
    <div class="dropdown"> 
    <button class="dropbtn">File 
     <i class="fa fa-caret-down"></i> 
    </button> 
    <div class="dropdown-content"> 
     <button>New</button> 
     <button>Open</button> 
     <button>Save</button> 
    </div> 
    </div> 
    <button>Edit</button> 
    <button>Tools</button> 
</div> 
+0

を持っているので、

アンカータグの実装は、同じ問題に苦しんでいませんでしたbootstrap4では、アンカータグを使用することになっています。 –

答えて

0

フロートであります問題を引き起こしています。

フロートを削除すると、レイアウトに影響を与えずに問題が修正されます。 「ファイル」の項目は、button要素ではなく、アンカー要素はそれほどピックアップなかったトップレベルのアンカー要素のスタイル

.menubar button { 
    float: none; 
} 
関連する問題