列表名称用可见滚动条断开

Question

这个下拉列表有点麻烦。http://jsfidle.net/vnr0rbuu/2/

如果你使用你的轨迹板或苹果鼠标，你有隐形滚动条默认，它为它工作！但是，如果你使用另一个鼠标或者一台PC，你的每个滚动条都是可见的，这里我的li没有正确地应用我的内联块的样式。

知道吗？

我得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;
                }

Answer 1

好的。真快，我希望我有更多的时间向你解释这件事。注意如何使用HTML是很重要的。这是一种标记语言。如果说internet是一个信息的集合，那么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。我已经添加了一些内联评论，但请谷歌我正在做的一切。搜索mdn 以查看关于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