Evitar la salida de línea en este caso.

Question

Estoy tratando de evitar la rotura de línea en este html

http://jsfiddle.net/dd3v8/

Sucede que cuando cambié el tamaño de mi ventana, tanto los iconos como el texto se divierten en una nueva línea.Ya he intentado con la propiedad de Whitespace CSS.También lo he intentado, un enfoque de mesa, pero el comportamiento es el mismo

¿Puede alguien figura lo que está sucediendo?

gracias de antemano

Answer 1

Intenta esto:

.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 explicación es simple: con flotación, no puede poner más anchura a un soporte, lo cual es más grande que la altura del soporte, el flotador lo reducirá automáticamente y se rompe la línea.

Si usa posiciones, use así:

contenedor (posición: relativo)
Bajo (Posiciones: Absoluto, Top: 0, izquierda: 0) Bajo (Posiciones: Absoluto, Fondo: 0, Derecha: 0)

en w3c: http://www.w3schools.com/css/css_positioning.asp

Answer 2

Si entiendo su problema correctamente, debe poder cambiar el tamaño del ancho de la ventana sin tener el texto y los iconos "X" que saltan, es así:

Retire los CSS del .title

min-width: 500px;

Consulte este Fiddle Ejemplo !