这是一个关于HTML的布局问题

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>inline-block</title>

    <style type="text/css">
        body {
            margin:0px;
        }

        #head {  height:100px;
                 box-shadow:0px 10px  1px  gray;
        }
        #headleft {
            width:50%;

         font-family:'Cambria Math';
        }
        #headright {     width:50%;
         float:left;
         list-style:none;
         font-family:'Cambria Math';
         text-decoration:none;
        }

    </style>

</head>

<body>
   <div  id="head"></div>
    <div>
    <div  id="headleft">欢迎</div>
        <div id="headright">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
         </div>
</body>

</html>

我想实现的是 欢迎在左边 横向排列的导航栏在右边，怎么没能实现呢？

<div style="display: flex;">//在这加
    <div  id="headleft">欢迎</div>
    <div id="headright">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</div>

你的欢迎的容器是div块级元素未浮动，独自占一行，导航内的li也是，默认独自占一行，而且ul li有默认的样式未清除

    <style type="text/css">
        body {
            margin:0px;
        }
        ul,li{margin:0;padding:0}
        ul li{float:left;}
        #head { 
            height:100px;
            box-shadow:0px 10px  1px  gray;

        }
        #headleft {
            width:50%;
            float:left;
            font-family:'Cambria Math';
        }
        #headright {    
            width:50%;
            float:right;
            list-style:none;
            font-family:'Cambria Math';
            text-decoration:none;
        }

    </style>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block</title>

<style type="text/css">
    body {
        margin:0px;
    }

    #head {  height:100px;
             box-shadow:0px 10px  1px  gray;
    }
    #headleft {
        width:50%;
      flow:left;

     font-family:'Cambria Math';
    }
    #headright {     width:50%;
     float:right;
     list-style:none;
     font-family:'Cambria Math';
     text-decoration:none;
    }

</style>




欢迎



  • 1

  • 2

  • 3





你的headright设置的浮动在左边，他怎么可能出现在右边呢