在这种情况下，防止换行 [英] Prevent line break in this case

问题描述

我试图防止此HTML中的换行符

I am trying to prevent line breaking in this Html

http://jsfiddle.net/DD3v8/

当我调整窗口大小时，图标和文本都会变成新行。我已经尝试过whitespace的CSS属性。我也尝试过，但是行为是一样的

It happens that when I resize my window, both icons and text break into new line. I've already tried with whitespace CSS property. I've tried also, a table approach, but the behaviour is the same

任何人都可以看出发生了什么？

Can anyone figure what is happening?

提前感谢

推荐答案

尝试：

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

解释很简单：浮动，你不能把更大的宽度到一个持有人，这大于持有人的身高，浮动将自动下降，并打破线。

The explanation is simple: with floating, you can't put more width to a holder, which is bigger than the holder's height, the float will automatically drops it, and breaks line.

如果您使用职位，请使用以下格式：

If you use positions, use it like this:

CONTAINER（位置：相对）

子元素（posision：absolute，top：0 ，left：0）放在左上角

SUBelement（posision：absolute，bottom：0，right：0）<放在右下角

CONTAINER (position: relative)
SUBelement (posision: absolute, top: 0, left: 0) < put to the top left
SUBelement (posision: absolute, bottom: 0, right: 0) < put to the bottom right

在W3C中： http://www.w3schools.com/css/css_positioning.asp

这篇关于在这种情况下，防止换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！