Css 为什么我的导航栏不是我当前代码的浏览器的整个宽度？_Css_Center

Css 为什么我的导航栏不是我当前代码的浏览器的整个宽度？

css

Css 为什么我的导航栏不是我当前代码的浏览器的整个宽度？,css,center,Css,Center,有了下面发布的CSS代码，我想我会制作一个导航条，扩展浏览器的宽度，并有一个红色背景。我还以为我会让页面的徽标出现在最左边，而文本直接出现在右边。我需要做什么才能使#ff0000导航条扩展浏览器的整个宽度？如何将此文本对齐到徽标右侧和浏览器窗口顶部以下是CSS代码： .logo{ float:left } .titletext { text-align: right; } nav { display: table;

有了下面发布的CSS代码，我想我会制作一个导航条，扩展浏览器的宽度，并有一个红色背景。我还以为我会让页面的徽标出现在最左边，而文本直接出现在右边。我需要做什么才能使#ff0000导航条扩展浏览器的整个宽度？如何将此文本对齐到徽标右侧和浏览器窗口顶部

以下是CSS代码：

.logo{
    float:left
            }

.titletext {
    text-align: right;
            }


nav {
    display: table;
    width:100%;
    background-color: #ff0000;
    }

以下是HTML代码：

<DOCCTYPE = HTML>

<html>
<head>
    <div class="titletext">
       <h2>Penguin NetOPS Solutions</h2> 
       <h3>IT Repair</h3>
    </div>
    <div class="logo">
      <img src="http://www.logodesignlove.com/images/classic/penguin-logo.jpg" alt="Mountain        View" style="width:200px;height:200px">
     </div>


<nav>
    <a href= "/~team_21/about_us.html">About Us</a> |
    <a href= "/~team_21/cgi-bin/loan_calculator.cgi">Calculate Loan Payments</a>|
    <a href= "/~team_21/cgi-bin/credit_check.cgi">Credit Check</a> |
    <a href= "/~team_21/contact_us.html">Contact Us</a>|
    <a href= "/~team_21/lottery.html">Special Offer</a>

</nav>
</head>
</html>


企鹅网络运营解决方案
IT维修
|
|
|
|

您的HTML无效。您可以将内容插入头标记中

检查这个


你的头衔
企鹅网络运营解决方案
IT维修
|
|
|
|

切勿在

标记内写入代码，应使用

浮点：右表示.titletext

HTML
<body>
<div class="titletext">
   <h2>Penguin NetOPS Solutions</h2> 
   <h3>IT Repair</h3>
</div>
<div class="logo">
  <img src="http://www.logodesignlove.com/images/classic/penguin-logo.jpg" alt="Mountain        View" style="width:200px;height:200px">
 </div>
<div class="clearfix"></div>

<nav>
    <a href= "/~team_21/about_us.html">About Us</a> |
        <a href= "/~team_21/cgi-bin/loan_calculator.cgi">Calculate Loan Payments</a>|
        <a href= "/~team_21/cgi-bin/credit_check.cgi">Credit Check</a> |
        <a href= "/~team_21/contact_us.html">Contact Us</a>|
        <a href= "/~team_21/lottery.html">Special Offer</a>

    </nav>
        </body>

只需添加float:right
到.titletext
类。另请参见，
是错误的。替换为。为什么您的代码位于标题部分？
<body>
<div class="titletext">
   <h2>Penguin NetOPS Solutions</h2> 
   <h3>IT Repair</h3>
</div>
<div class="logo">
  <img src="http://www.logodesignlove.com/images/classic/penguin-logo.jpg" alt="Mountain        View" style="width:200px;height:200px">
 </div>
<div class="clearfix"></div>

<nav>
    <a href= "/~team_21/about_us.html">About Us</a> |
        <a href= "/~team_21/cgi-bin/loan_calculator.cgi">Calculate Loan Payments</a>|
        <a href= "/~team_21/cgi-bin/credit_check.cgi">Credit Check</a> |
        <a href= "/~team_21/contact_us.html">Contact Us</a>|
        <a href= "/~team_21/lottery.html">Special Offer</a>

    </nav>
        </body>

     .clearfix
        {
        clear:both;
        }
        .logo{
                float:left
        }
        .titletext {
            float: right;
        }
        nav {
            display: table;
            width:100%;
            background-color: #ff0000;
        }