左のテキストボックスにドロップダウンボックスのテキストボックス

トラックの左側にテキストボックスを表示するのに役立つ必要があります。これはそれが見えるべきものです。左のテキストボックスにドロップダウンボックスのテキストボックス

.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #94CB32; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 10; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}

<div class="dropdown"> 
 
    <a href="#">Track</a> 
 
    <div class="dropdown-content"> 
 

 
    <input type="text" placeholder="OrderID" ID="Button1" Text="Track"> 
 
    <input type="button" value="Track" /> 
 

 
    </div> 
 
</div>

出典

2017-04-07 Anonymous

あなたが正確に必要なものを意味していますか？テキストボックスとボタンが並んでいますか？ポップアップフォームフィールドをリンクの左側に表示しますか？あなたはMSペイントや何かで何をしたいのか分かりますか？ – doppelgreener

[IMG] http://i65.tinypic.com/2enb093.png [/ IMG]これはこのようにしたいです –

は.dropdown-contentに以下を追加します。

top: 0; 
right: calc(100% + 5px);

注を、あなたが配置に関する注意する必要があります別のものを表示する一つの要素を置くとこと。親要素と子要素の間に隙間がある場合、親要素をホバリングしなくなり、子要素が消えます。これを修正するには、両方の要素が互いに接触する必要があります。これを行うには、タッチしている（隣り合っているか重なり合っているか）、余白を追加する（背景色を使用するのが理想的でないかもしれない）、擬似要素を使用するなどがあります。私は後者はので、私はこのセレクタを追加しました：このソリューションは、あなたのイメージにショーを持っているかい

.dropdown-content:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    width: 5px; 
    top: 0; 
    right: -5px; 
    bottom: 0; 
}

が、私はあなたが（しようとしている）したいかどうかはわかりません.dropdownの左にスペースを扱います。私はbodyの幅を狭くして飛び出しているのを見ることができます。

body { 
 
    width: 40%; 
 
    margin: 25px auto; 
 
} 
 

 
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
/* Fills gap between Track and flyout so it will continue to show when moving mouse. */ 
 
.dropdown-content:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    width: 5px; 
 
    top: 0; 
 
    right: -5px; 
 
    bottom: 0; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    right: calc(100% + 5px); 
 
    background-color: #94CB32; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 10; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}

<div class="dropdown"> 
 
    <a href="#">Track</a> 
 
    <div class="dropdown-content"> 
 

 
    <input type="text" placeholder="OrderID" ID="Button1" Text="Track"> 
 
    <input type="button" value="Track" /> 
 

 
    </div> 
 
</div>

出典

2017-04-07 14:48:36 hungerstar

それは働いた！ありがとうございました。しかしドロップダウンがゆっくりと消えるようにすることができます –

@Melwin私は自分の答えを更新しました。私は簡単な説明も含んでいます。 – hungerstar

TYSM。チャームのように働いた –

それは

が更新スニペット

.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #94CB32; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 10; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: flex; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}

<html> 
 

 

 
<div class="dropdown"> 
 
    <a href="#">Track</a> 
 
    <div class="dropdown-content"> 
 

 
    <input type="text" placeholder="OrderID" ID="Button1" Text="Track"> 
 
    <input type="button" value="Track" /> 
 

 
    </div> 
 

 

 
</div> 
 

 
</html>

0をチェックdropcontentため display: flexを使用し、簡単です

出典

2017-04-07 14:38:24 Lucian

しかし、テキストボックスとボタントラックの左側に表示されません –

質問したことについてもう一度質問してください。必要に応じて質問を更新してください – Lucian

左のテキストボックスにドロップダウンボックスのテキストボックス

答えて

関連する問題