Question

通过下面发布的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>

Answer 1

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

选中此DEMO

<head>
    <title>Your title</title>
</head>
<body>
    <!-- Place here your content -->
    <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>
</body>

Answer 2

<强> JS Fiddle

永远不要在<head>标记内写代码，您应该float:right使用.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>

<强> CSS

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

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

2 个答案: