表示パス、

Question

をラップなし要素は、div sが（\）フォルダ名と分割が含まれていますし、search-itemはそれにパスが含まれますフォルダ。あなたはそれが外になっていることがわかりスニペットを実行すると

/* 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>

：

どういうわけか、このように見て

：

\ Some \ path

構造は次のようになります私はそれがパディングの下に隠れて1行ですべてを得ることを望んでいる間。

また、スクロールすると右にスクロールします。しかし、スクロールバーは表示されません。

Answer 1

あなたがwidth: 900px;追加することができます（または、あなたに合った任意の固定の幅を、それが固定されるようにHADS）と.app.searchbar.objectからoverflow-x:visible;、そしてそこにフロートを削除します。

/* 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>

Answer 2

追加overflow: scroll; white-space: nowrap;〜.app.searchbar.objectと表示：インラインブロック.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>