个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我正在尝试创建一个延伸到浏览器宽度的固定水平导航。我遇到的问题是，当我调整浏览器窗口大小时，导航栏中的链接会移动。我怎样才能做到这一点，以便当您调整网络浏览器大小时，链接(主页、服务...)保持固定在右侧并与#content 垂直对齐。？
这是我的 html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
</head>
<body>
<!--Navigation-->
<div id="fixed_bar">
<div id="navigation">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Services">Services</a></li>
<li><a href="About">About</a></li>
<li><a href="Contact">Contact</a></li>
</ul>
</div>
</div>
<!--Content-->
<div id="content">
<!--Content-->
</div>
</body>
</html>
还有我的 CSS:
body {
background-color:yellow;
color:black;
width:100%;
padding:0;
margin-left:auto;
margin-right:auto;
font-size:16px;
font-family:"Sans-Serif", Helvetica, Arial;
}
/*Navigation*/
#navigation {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation ul {
list-style:none;
display:inline-block;
margin:0;
padding:0;
float:right;
overflow:hidden;
}
#navigation ul li{
padding:10px;
float:left;
clear:right;
}
#navigation ul li a{
background-color:inherit;
color:black;
vertical-align:middle;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-family:"Lato", sans-serif;
letter-spacing:1px;
line-height:40px;
clear:both;
}
/*Content*/
#content {
padding-top:50px;
margin:auto;
width:900px;
color:black;
background-color:white;
}
我已经尝试解决这个问题几个小时了，非常感谢您的帮助
最佳答案
您可以将实际的 #navigation CSS 规则应用到您的 #fixed_bar div 并为 #navigation 提供与内容相同的宽度(900px ), 让浏览器使用自动边距计算边距并将文本右对齐，这样 ul 将位于 #navigation 的右侧，同时保留背景，在 #fixed_bar 中等。
在这里查看:http://jsbin.com/bibulewa/1
这是我修改过的 CSS:
#fixed_bar {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation {
width: 900px;
text-align: right;
margin: auto;
}
关于html - 如何让一个固定的导航栏拉伸(stretch)到浏览器的宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23446061/
24
4
0
我想创建一个随页面宽度变化的页眉。 我的标题由三部分组成，固定宽度的两侧和可拉伸(stretch)的中间部分。 我使用 displa
我正在尝试在导航栏下方创建一列内容，以便内容的宽度与导航栏的宽度完全匹配。事实证明这比我预期的要困难。 给定这样的东西: link
我有一个大小为 12*30 的字符串的图像。我想创建一个动画，让它给人一种拉伸(stretch)字符串的感觉。我通过缩放图像来做到这一点，但我面临的问题是缩放图像没有发生碰撞。它仅出现在原始图像大小的
在 Silverlight 中，如何拉伸(stretch) Line 的宽度以填充作为子元素的 StackPanel 的宽度？更喜欢 XAML 解决方案，而不是代码隐藏。这是我在 WPF 中的操作方法
QML 怎么可能？自动拉伸(stretch)元素以使其所有子元素都适合它？以及如何指定间距？例如，我想在文本周围有一个矩形。矩形应该有一些内部间距。 如果我写以下内容，则矩形的大小为 0,0。 Rec
我已经习惯了使用 matlab，现在正在尝试转换 matplotlib 和 numpy。 matplotlib 中是否有一种方法可以让您绘制的图像占据整个图形窗口。 import numpy as n
我有一个(简化的)2x2 网格，里面有三个控件。左控制在两行上延伸。
假设我有 3 个大小不匹配的列表，[3, 7, 6]、[12, 67, 89, 98] 和 [1, 2, 3, 4, 5, 6, 7]我想要一个函数来执行此操作: >>> stretch([3, 7,
如果 Image 被 Stretched，我可以获取 Height 和 Width 吗>UniformToFill? 我尝试了 Width 和 Height 属性，但它们始终是 NaN。 最佳答案 如
当我为微调器使用我自己的背景主题时，它是拉伸(stretch)图标。 我的微调器代码是: 我的 spinner.xml 是: 和我从 sdk 4 复制的图
我正在尝试在 OpenGL 中创建一个简单的 GUI。我创建了一张图片，以便我可以引用它并使解释更简单: 当我将按钮 (32x32) 的纹理应用到大小为 120x20 的四边形多边形(即不是矩形作为纹
SurfaceTexture 预览被拉伸(stretch)了!我正在开发一个 camera2 应用程序。每个设备都工作不好。视频和照片的预览被拉伸(stretch)。 public class Cam
我使用一些ImageButtons 创建了一个Android layout。我的布局在小屏幕(例如 3.6 英寸到 4.2 英寸)上运行良好，但是当我在 7 英寸或 9 英寸平板电脑上使用我的应用程序
我在拉伸(stretch) GridView 以适应显示宽度时遇到问题。任何人都知道如何解决这个问题？我希望 GridView 占据整个宽度，包括蓝色标记的字段(见下图)
我使用位图作为 Activity 的背景。自定义背景代码为: 但是它位于中间，并没有占据整个屏幕空间。我怎样才能让它填满所有可用空间？我尝试将宽度和高度设置为 fill_parent。 谢谢 最
所以我最近一直在为 iOS 开发应用程序，但遇到了一个难题。我正在制作一个迷你合成器，然后开始制作 GUI。我开始制作键盘(目前为 2 个 Octave )并测量了白键的大致长度。一切都很好，直到我在
好的，所以我在 slider 内有一个图像，但它不能正确缩放。 先小后伸，想一直伸到底，怎么实现？ 看一下截图(忽略第二张截图中的红色部分): 还有CSS: .slider-wrapper {
我有下面的 HTML，我希望容器 div 拉伸(stretch)到窗口的整个高度。这对 wine 有效，但是当您移除容器内的两个蓝色 div 时会发生什么？容器延伸到其中蓝色 div 的底部，但不会延
我正尝试在 this example 之后制作背景，但我需要嵌套 2 个容器。 我的代码看起来像这样: XHTML:
这是关于用颜色填充背景。 我正在构建 this project 的 SwiftUI 版本.这是一个选项卡式应用程序(测试工具)。 This is my Working Project 我要做的第一件事
我是一名优秀的程序员,十分优秀！