qq_43412960
qq_43412960
采纳率79.1%
2019-07-06 09:07 阅读 290

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

5
 <!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条回答 默认 最新

  • as_csdn 代码的灵魂是bug! 2019-07-06 09:56
    <div style="display: flex;">//在这加
        <div  id="headleft">欢迎</div>
        <div id="headright">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>
    
    
    点赞 1 评论 复制链接分享
  • qq_35235940 听楼一夜雨 2019-07-06 09:59

    你的欢迎的容器是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>
    
    点赞 1 评论 复制链接分享
  • weixin_45243540 weixin_45243540 2019-07-08 16:32

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

    点赞 1 评论 复制链接分享

相关推荐