2017-03-19 8 views
0

I持って、次のCSSとHTML:は、その内容に調整

.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; 
 
    right: 0; 
 
    background-color: #f9f9f9; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
} 
 

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

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

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

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}
<body> 
 
    <div class="dropdown" style="float:left;"> 
 
    <button class="dropbtn">Left</button> 
 
    <div class="dropdown-content" style="left:0;"> 
 
     <a href="#">Make this phrase appear on one line.</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 

 
</body>

私は、ドロップダウンリスト内のすべてのメニュー項目がライン上に表示されませんしたい - どんなに長い彼らあります。人々はこれが起こるとdisplay: inline-blockと言う。そしてまだ成功していない。ヒントをお願いしますか?

答えて

1

どの程度に応じて拡張するためにwidth:100%; .dropdown を追加し、から.dropdown-コンテンツright:0;を削除します良いoldfashioned white-space: nowrap;

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

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

 
.dropdown-content { 
 
    position: absolute; 
 
    left: 0; 
 
    display: none; 
 
    background-color: #f9f9f9; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 

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

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

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

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}
<body> 
 
    <div class="dropdown" style="float:left;"> 
 
    <button class="dropbtn">Left</button> 
 
    <div class="dropdown-content" style="left:0;"> 
 
     <a href="#">Make this phrase appear on one line.</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 

 
</body>

0

あなたのドロップダウンコンテナは、大きなコンテンツに適合するほど大きくありません。 だから、160ピクセルから300ピクセルにコンテナの幅を増やす:

.dropdown-content { 
min-width: 300px; 
} 

これで問題が解決されます。

おかげ

+0

私は(MIN-wdith削除)質問を更新しました。実際には、私は明示的に幅を設定するという原始的な解決策を使用したくありません。私はそれを自動的に調整したい。そして、 'width:auto'はどちらも助けにならない、BTW –

1

は、ドロップダウンのdiv

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

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

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
    top: 100%; 
 
} 
 

 
.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: inline-block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}
<body> 
 
    <div class="dropdown" style="float:left;"> 
 
    <button class="dropbtn">Left</button> 
 
    <div class="dropdown-content" style="left:0;"> 
 
     <a href="#">Make this phrase appear on one line.</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 

 
</body>

関連する問題