web-dev-qa-db-fra.com

Ne pas envelopper les éléments span

J'ai une liste de <span> éléments pouvant être déplacés à gauche et à droite à l'intérieur d'un <div> élément, et si certaines plages dépassent le div, elles doivent être masquées. Cela fonctionne très bien en utilisant overflow: hidden. Cependant, s'il y a plus de portées que de contenu dans le div, les portées sont bouclées, ce qui est un comportement indésirable pour mon cas d'utilisation. Comment puis-je ne pas enrouler les travées?

J'ai fait un jsFiddle pour montrer ce que je veux dire. Lorsque vous cliquez à l'intérieur du .board vous allez ajouter un autre .card. À la quatrième carte, vous verrez l'emballage.

Remarque: Le fait que les portées soient utilisées n'est pas vraiment important, donc si cela peut être fait pour fonctionner avec par ex. liste des éléments, ce serait probablement bien. L'important est que les éléments puissent contenir une image et du texte en dessous.

Voici le code du jsFiddle:

<div class="board">
   <div class="cards"></div>
</div>

$('.board').mousemove(function(e) {
    $('.cards').css({left: e.pageX});
});

$('.board').click(function(e) {
   $('.cards').append("<span class='card'></span>") 
});

.card {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    float: left;
    margin-left: 4px;
    margin-right: 4px;   
}  

.cards {
    position: relative;
    top: 10px; 
}

.board {
    width: 400px;
    height: 120px;
    border: 1px solid red;
    position: relative;
    overflow: hidden;
}
cssword-wrap
22
Jonas

Vous pouvez utiliser inline-block sur .card à la place de float, puis désactiver le wrapping avec nowrap:

Pour .card:

display:inline-block;

Pour les cartes.:

white-space:nowrap;

http://jsfiddle.net/33kj4/1/

40
MaX

Réglez simplement la largeur de .cards à un nombre énorme:

.cards {
    position: relative;
    top: 10px;
    width: 99999%;
}

jsFiddle

La largeur par défaut de .cards est contraint à la largeur de son parent .board, 400px. La plupart du temps, avoir une largeur maximale est bon, car cela oblige les enfants à envelopper si nécessaire. Mais comme cela ne vous dérange pas, vous pouvez passer outre.

1
Rory O'Kane

Vous essayez de faire une mise en page "bloc" avec des éléments SPAN. Les éléments SPAN ne conviennent pas au bloc, c'est à cela que servent les DIV.

1
Alexander

Essayez d'ajouter ceci à votre CSS:

.cards {
    white-space: nowrap;
    float: left;
}
0
koala_dev