这是一个关于HTML的布局问题 5C
 <!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>

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

3个回答

<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>
qq_35235940
听楼一夜雨 那你先分清楚块级元素和行内元素的区别吧
9 个月之前 回复
qq_43412960
qq_43412960 可是我设置欢迎div宽度了啊 这也不行。。
9 个月之前 回复

<!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设置的浮动在左边,他怎么可能出现在右边呢

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问