Prévenir la pause de la ligne dans ce cas

Question

J'essaie d'empêcher la rupture de ligne dans ce HTML

http://jsfiddle.net/dd3v8/

Il arrive que lorsque je redimensionniste ma fenêtre, les icônes et la cassure de texte dans une nouvelle ligne.J'ai déjà essayé avec la propriété Whitpace CSS.J'ai également essayé, une approche de table, mais le comportement est le même

Quelqu'un peut-il comprendre ce qui se passe?

Merci d'avance

Answer 1

Essayez ceci:

.line {
            height: 44px; 
            width: 100%; 
            display: inline-block; 
            background-color: #6c7987;
            white-space: nowrap;
            position: relative;
        }

        .icon {
            position: absolute;
            left: 0;
            height: 44px; 
            width: 90px; 
            background-color: 
            #FF0080; 
            color: white;
            text-align: center;
            line-height: 44px;
            font-family: Arial;
            float: left;
            font-size: 12px;
            font-weight: bold;
            padding: 0;
        }

        .title {
            position: absolute;
            left: 90px;
            color: white;
            line-height: 44px;
            text-align: left;
            padding: 0 0 0 10px;
            font-family: Arial;
            float: left;
            font-size: 12px;
            display: inline;
            white-space:nowrap;
        }

        .botoes {

            position: absolute;
            width: 300px;
            right: 0
        }

        .botao {
            width: 46px;
            height: 45px;
            float: right;
            line-height: 44px;
            text-align: center;
            display: block;
            white-space:nowrap;
            cursor: pointer;
        }

        .botaoVerRecurso {
            background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
        }

        .botaoVerRecurso:hover {
            background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
        }

        .botaoEditarRecurso {
            background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
        }

        .botaoEditarRecurso:hover {
            background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
        }

        .botaoFavRecurso {
            background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
        }

        .botaoFavRecurso:hover {
            background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
        }

        .botaoPartRecurso {
            background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
        }

        .botaoPartRecurso:hover {
            background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
        }

        .botaoApagarRecurso {
            background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
        }

        .botaoApagarRecurso:hover {
            background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
        }

        .clear {
            clear: both;
        }

L'explication est simple: avec flottant, vous ne pouvez pas mettre plus de largeur à un support, ce qui est plus grand que la hauteur du support, le flotteur le laisse tomber automatiquement et rompt la ligne.

Si vous utilisez des positions, utilisez-la comme ceci:

conteneur (position: relatif)
Subelement (Posision: Absolute, Top: 0, Gauche: 0) Subelement (Posision: Absolute, Bottom: 0, Droite: 0)

in w3c: http://www.w3schools.com/css/css_positioning.aspectaa>

Answer 2

Si je comprends votre problème correctement, vous devez être capable de redimensionner la largeur de la fenêtre sans avoir le texte et les icônes "x" sautant, est donc:

Supprimer CSS de .title

min-width: 500px;

Voir ce exemple de violon !