gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 08:52:31 24 4
gpt4 key购买 nike

使用下面发布的 CSS 代码,我想我会制作一个导航栏,它可以扩展浏览器的宽度并具有红色背景。我还想我会让页面的标志出现在最左边,文字紧挨着右边。我需要做什么才能使 #ff0000 导航栏扩展浏览器的整个宽度?如何将此文本对齐到 Logo 的右侧和浏览器窗口的顶部?

这是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>

最佳答案

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;
}

关于css - 为什么我的导航栏不是我当前代码的浏览器的整个宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27288448/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com