float布局的元素为什么会换行，如何解决

trust2018

发布于
2018-12-27

如图所示：
图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main{
            width:740px;
            margin:0 auto;
            position: relative;
            background:lightsalmon;
            height:800px;
        }
        .wrap{
            position: absolute;
            left: 50%;
            bottom: 4px;
            color: #9DA2AD;
            z-index: 3;
            padding: 0px 16px;
            height: 24px;
            border-radius: 16px;
            background: lightblue;
            transform:translateX(-50%);
        }
        .wrap div{
            line-height: 24px;
            float:left;
        }
    </style>
</head>
<body>

<div class="main">
    <div class="wrap">
        <div class="left1">sample text</div>
        <div class="left2">left2 content left2</div>
        <div class="left31">left31 left31 left31 left31 left31 </div>
        <div class="left32">left32</div>
        <div class="left">left33</div>
        <div class="left4">left4 content</div>
    </div>
</div>

</body>
</html>

css float 水平居中

阅读 4.9k

3 个回答

得票最新