0
私は少しこのプロジェクトに取り組んできました。あなたが「E」を検索し、ブラウザにサイズを変更した場合結果は2行で表示されますか？
http://www.periodictablesearch.zackreid.com/
はそれがある時点で中断します。
Htmlの
<div class="resultsdiv">
<!-- Show Results -->
<ul id="results"></ul>
</div>
次にCSS
.resultsdiv{
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 10px;
}
ul#results {
display: none;
justify-content: center;
background-color: rgba(255, 255, 255, 0.09);
height: 120px;
margin-top: 4px;
overflow:auto;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.24) 0px 0px 43px;
-moz-box-shadow: rgba(0, 0, 0, 0.24) 0px 0px 43px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 0px 43px;
}
ul#results li {
width: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 10px 10px 10px;
padding: 8px 8px 8px 8px;
cursor: pointer;
border: aliceblue solid 1px;
transition: background-color .3s ease-in-out;
-moz-transition: background-color .3s ease-in-out;
-webkit-transition: background-color .3s ease-in-out;
}
は、私は結果が余分なライン上に行くことができますことをとにかくありますか？
CSSを使用する。
ディスプレイを使用して行います。フレックスとフレックスラップ：ULのためにラップ？ページは、クロムで見ることができ、白い背景と色のある場所でのみ使用できます。 –
http://stackoverflow.com/a/37091668/3597276 –
** **フレックスラップ：折り返し'ul'と** **は' height：120px'を削除して伸ばします。 Firefoxにバックグラウンドがあるように、 '-moz-radial-gradient'という主要な背景グラデーションの別のプレフィックスを追加する必要があります。 – misterManSam