题
我正在尝试防止此 Html 中的换行
当我调整窗口大小时,图标和文本都会换行。我已经尝试过使用空白 CSS 属性。我也尝试过表方法,但行为是相同的
谁能弄清楚发生了什么事吗?
提前致谢
解决方案
试试:
.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;
}
.
解释很简单:随着浮动,你不能把更多的宽度放到一个比持有者的高度大,浮动会自动掉落它,并打破线条。
如果使用位置,请使用如下:
容器(位置:相对)
子元素(POSION:绝对,顶部:0,左:0)<放入左上方
子元素(POSION:绝对,底部:0,右:0)<放到右下方
其他提示
不隶属于 StackOverflow