CSS 三列平分

CSS 三列平分_第1张图片


<html>

    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            h1{
                text-align: center;
            }
            .main {
                width: 1200px;
                height: 200px;
                margin: 0 auto;
                background: black;
                position: relative;
            }

            ul {
                list-style: none;
                overflow: hidden;
                margin-right: -20px;
            }

            li {
                width: 386.66px;
                height: 200px;
                margin-right: 20px;
                background: red;
                float: left;
                line-height: 200px;
                text-align: center;
                font-size: 100px;
                color: blue;
            }
        style>
    head>

    <body>
        <h1>(1200-40)/3=386.66h1>
        <div class="main">
            <ul>
                <li>1li>
                <li>2li>
                <li>3li>
            ul>
        div>
    body>

html>

你可能感兴趣的:(web前端学习,css,三列,平分)