列表名称被可见滚动条打破
我在这个下拉列表中遇到了一些麻烦。 http://jsfiddle.net/vnr0rbuu/2/
如果你使用你的触控板或苹果鼠标，默认情况下你有看不见的滚动条，它适用于它！ 但是，如果您使用另一个鼠标或PC，例如，您可以看到每个滚动条，并且在这里我的内容不能正确应用我的内联块的样式。
任何想法 ？
我的HTML：
<ul class="app-dropdown">
<li class="app">
<ul class="app-list">
<li class="app-name">
<p>Android Application With a real long name</p>
</li>
<li class="app-icon">
<img src=""/>
</li>
</ul>
</li>
<li class="app">
<ul class="app-list">
<li class="app-name">
<p>Fucking shit</p>
</li>
<li class="app-icon">
<img src=""/>
</li>
</ul>
</li>
</ul>
和我的CSS：
.app-dropdown {
display: block;
position: absolute;
min-width: 160px;
max-width: 300px;
max-height: 350px;
margin: 15px;
}
.app {
display: block;
padding: 15px 25px;
border-bottom: 1px solid #F4F4F4;
vertical-align: middle;
text-align: right;
}
.app-list {
display: inline-block;
}
.app-name {
padding-right: 5px;
display: inline-block;
vertical-align: middle;
}
.app-name p { /* Truncate long name */
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-icon {
display: inline-block;
}
.app-icon img {
border-radius: 3px;
display: inline-block;
vertical-align: middle;
}
好。 真的很快，我希望我有更多时间向你解释这一点。 注意你如何使用HTML是很重要的。 这是一种标记语言。 如果互联网是一个信息的集合，HTML是一种标准化的方式来分类哪些文本是什么类型的信息。 正确使用它。 仅仅是一个列表的UI列表内部的列表是没有意义的。 下面是一些更合适的标记。
HTML
<ul class="app-dropdown">
<li>
<label>Android Application With a real long name</label>
<img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
</li>
<li>
<label>Fucking shit</label>
<img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
</li>
<li>
<label>Short Name</label>
<img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
</li>
<li>
<label>Short Name</label>
<img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
</li>
<li>
<label>Short Name</label>
<img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
</li>
<li>
<label>Short Name</label>
<img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
</li>
<li>
<label>Short Name</label>
<img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
</li>
<li>
<label>Short Name</label>
<img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
</li>
<li>
<label>Very long long long app name</label>
<img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
</li>
</ul>
下面是你的CSS。 我已经在线添加了一些评论，但请Google公布我所做的一切。 搜索MDN <CSS property> || <HTML property> MDN <CSS property> || <HTML property>可以查看关于HTML / CSS / JS代码的非常好的文档（例如https://developer.mozilla.org/en-US/docs/Web/CSS/calc）。
此外，您可以使用caniuse.com检查平台对新事物的支持（例如http://caniuse.com/#search=calc）。
CSS
* { margin:0; padding:0 }
body {
font-family: "Open Sans", sans-serif;
}
ul {
/* this should only ever be applied to ul elements */
list-style: none;
}
.app-dropdown {
min-width: 160px;
max-width: 300px;
/* your height presumably will not change so
you are only adding complexity by giving it
a min-max. */
height: 350px;
margin: 15px;
border: 1px solid #d7d7d7;
border-radius: 4px;
box-shadow: 0 6px 10px rgba(0,0,0,.125);
overflow: hidden;
overflow-y: scroll;
}
.app-dropdown li {
/* display:block prevents list items from flowing
horizontally with the .app-dropdown is very wide
or list items very narrow */
display: block;
white-space: nowrap; /* look this up on mdn */
padding: 15px 25px;
/* google box-sizing. it’s needed for the label
width calculation below. */
box-sizing: border-box;
border-bottom: 1px solid #eee;
text-align: right;
width: 100%;
}
.app-dropdown label {
padding-right: 5px;
display: inline-block;
vertical-align: middle;
/* Truncate long name */
/* width == available space minus width of image */
width: calc(100% - 32px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-dropdown img {
border-radius: 3px;
display: inline-block;
vertical-align: middle;
}
最后使用一个演示平台，在你输入时自动更新。 Jsbin，CodePen，Dabblet都比JsFiddle更好，但还有更多。
演示：http://jsbin.com/luviya/2/edit
链接地址: http://www.djcxy.com/p/87829.html上一篇: Lists names are broken with visible scrollbar
下一篇: Make div container containing multicolumn elements expand to width of columns