Prevenire la rottura della linea in questo caso

Question

Sto cercando di impedire la rottura della linea in questo html

http://jsfiddle.net/dd3v8/

Succede che quando ridimensiono la mia finestra, sia le icone che il testo si rompono in nuova linea.Ho già provato con la proprietà WhiteSpace CSS.Ho provato anche, un approccio da tavolo, ma il comportamento è lo stesso

Qualcuno può capire cosa sta succedendo?

Grazie in anticipo

Answer 1

Prova questo:

.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;
        }

.

La spiegazione è semplice: con flottante, non è possibile mettere più larghezza a un supporto, che è più grande dell'altezza del supporto, il galleggiante lo cade automaticamente e si rompe la linea.

Se usi le posizioni, usarlo come questo:

Contenitore (Posizione: relativo)
Subelment (Posizione: Absolute, Top: 0, a sinistra: 0) Subelment (Posizione: Absolute, Bottom: 0, Destra: 0)

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

Answer 2

Se capisco il tuo problema correcly, devi essere in grado di ridimensionare la larghezza della finestra senza avere il testo e le icone "x" che saltano giù, è così:

Rimuovi CSS da .title

min-width: 500px;

.

Vedi questo Fiddle Esempio !