chemin d'affichage en une ligne, aucun élément d'emballage

je dois avoir un élément div avec div s et l'affichage de search-item en une ligne, les div s contiennent les noms de dossiers et de scissions (\) et search-item contiendra le chemin que dossier.chemin d'affichage en une ligne, aucun élément d'emballage

recherche un peu comme ceci:

\ Some \ path

La structure ressemble à ceci:

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

Lorsque vous exécutez l'extrait que vous voyez qu'il sort de la ligne, alors que je veux que tout se passe dans une ligne cachée sous le rembourrage. Si vous faites défiler vers le bas, le défilement vers la droite sera également défilé. Mais la barre de défilement n'est pas supposée montrer.

Source

2017-07-17 dCode

Vous voulez juste se cacher en cas de débordement, oui? –

Oui, mais je veux également faire défiler sera défiler vers la droite – dCode

Je ne comprends pas comment le scrolldown ressemblerait dans ce cas, par exemple 'overflow: hidden' peut simplement cacher les entrées débordantes. –

Vous pouvez ajouter width: 900px; (ou toute largeur fixe qui vous convient, mais il HAD à fixer) et overflow-x:visible;-.app.searchbar.object et supprimer le flotteur là:

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

Source

2017-07-17 21:11:26 Johannes

add overflow: scroll; white-space: nowrap; à .app.searchbar.object et utiliser l'affichage: en-bloc pour .item' and .split`. semble le faire.

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

Source

2017-07-17 21:12:30 Dij

chemin d'affichage en une ligne, aucun élément d'emballage

Répondre

Questions connexes