2017-07-17 82 views
0

我需要与div个div元素和search-item S IN一个行显示,所述div旨意包含的文件夹名称和分裂(\)和search-item将包含的路径夹。显示路径,没有元件包装

不知怎的,看起来像这样:

\ Some \ path

的结构是这样的:

/* Search */ 
 
.app.searchbar.object { 
 
    height: 50px; 
 
    min-width: 100%; 
 
    background: rgb(35, 35, 35); 
 
    float: left; 
 
    word-wrap: none; 
 
    word-break: none; 
 
    display: block; 
 
} 
 

 
.app.searchbar.item { 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    margin-left: 5px; 
 
    color: rgb(150, 150, 150); 
 
    padding: 5px; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
.app.searchbar.item:hover { 
 
    transition: all 0.1s ease; 
 
    background: rgb(200, 200, 200); 
 
    color: rgb(125, 125, 125); 
 
    border-radius: 5px; 
 
} 
 

 
.app.searchbar.split {} 
 
.app.searchbar.split::before { 
 
    content: '\\'; 
 
    color: rgb(100, 100, 100); 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
    margin-left: 5px; 
 
    color: rgb(150, 150, 150); 
 
    float: left; 
 
}
<div class="app searchbar object"> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="0">A</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="1">Very</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="2">Special</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="3">Path</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="4">That</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="5">Contains</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="6">Hidden</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="7">Files</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="8">That</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="9">Can</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="10">Ruin</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="11">Your</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="12">Life</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="13">So</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="14">Much</search-item> 
 
</div>

当您运行的代码片段,你看到它失控的行,而我想让它在隐藏在填充下的一行中获得所有内容。

向下滚动会导致向右滚动。但滚动条不应该显示。

+0

所以你只是想躲在溢出的情况下,是吗? –

+0

是的,但我也想scrolldown将向右滚动 – dCode

+0

我不明白scrolldown在这种情况下会是什么样子,例如'overflow:hidden'可以隐藏溢出条目。 –

回答

0

你可以在里面添加width: 900px;(或适合你的任何固定的宽度,但操是固定的),并overflow-x:visible;.app.searchbar.object,并删除浮动:

/* Search */ 
 
.app.searchbar.object { 
 
    height: 50px; 
 
    min-width: 100%; 
 
    background: rgb(35, 35, 35); 
 
    word-wrap: none; 
 
    word-break: none; 
 
    display: block; 
 
    width: 900px; 
 
    overflow-x:visible; 
 
} 
 

 
.app.searchbar.item { 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    margin-left: 5px; 
 
    color: rgb(150, 150, 150); 
 
    padding: 5px; 
 
    display: inline-block; 
 
float:left; 
 
} 
 

 
.app.searchbar.item:hover { 
 
    transition: all 0.1s ease; 
 
    background: rgb(200, 200, 200); 
 
    color: rgb(125, 125, 125); 
 
    border-radius: 5px; 
 
} 
 

 
.app.searchbar.split {} 
 
.app.searchbar.split::before { 
 
    content: '\\'; 
 
    color: rgb(100, 100, 100); 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
    margin-left: 5px; 
 
    color: rgb(150, 150, 150); 
 
    float: left; 
 
}
<div class="app searchbar object"> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="0">A</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="1">Very</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="2">Special</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="3">Path</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="4">That</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="5">Contains</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="6">Hidden</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="7">Files</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="8">That</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="9">Can</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="10">Ruin</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="11">Your</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="12">Life</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="13">So</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="14">Much</search-item> 
 
</div>

0

overflow: scroll; white-space: nowrap;.app.searchbar.object并使用display:inline-block for .item' and .split`。似乎这样做。

/* Search */ 
 
.app.searchbar.object { 
 
    height: 50px; 
 
    min-width: 100%; 
 
    background: rgb(35, 35, 35); 
 
    float: left; 
 
    display: block; 
 
    overflow: scroll; 
 
    white-space: nowrap; 
 
} 
 
.app.searchbar.split{ 
 
    display: inline-block; 
 
} 
 
.app.searchbar.item { 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    margin-left: 5px; 
 
    color: rgb(150, 150, 150); 
 
    padding: 5px; 
 
    display: inline-block; 
 
} 
 

 
.app.searchbar.item:hover { 
 
    transition: all 0.1s ease; 
 
    background: rgb(200, 200, 200); 
 
    color: rgb(125, 125, 125); 
 
    border-radius: 5px; 
 
} 
 

 
.app.searchbar.split {} 
 
.app.searchbar.split::before { 
 
    content: '\\'; 
 
    color: rgb(100, 100, 100); 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
    margin-left: 5px; 
 
    color: rgb(150, 150, 150); 
 
}
<div class="app searchbar object"> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="0">A</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="1">Very</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="2">Special</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="3">Path</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="4">That</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="5">Contains</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="6">Hidden</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="7">Files</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="8">That</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="9">Can</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="10">Ruin</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="11">Your</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="12">Life</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="13">So</search-item> 
 
    <div class="app searchbar split"></div> 
 
    <search-item class="app searchbar item" item="14">Much</search-item> 
 
</div>