html - 移动横幅上 float 的替代方案-6ren

html - 移动横幅上 float 的替代方案

转载作者：行者123 更新时间：2023-11-28 05:43:23

25

4

当视口(viewport)小于网站分辨率时，我正在使我的所有容器保持“全尺寸”并正确定位。

到目前为止，除了导航栏之外，一切都很容易。

在调整窗口大小时，导航栏文本会移动。它目前使用 float: right;

在这种情况下是否有替代 float 的方法？我尝试定义左右边距，但文本并没有保持在一条直线上。

有问题的网站是:njdartistics.com

@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'Bebas';
    src: url(Website%20Specific%20Resources/BEBAS.TTF)
}


body {
	background-image:url(Website%20Specific%20Resources/Background.png);

	width:1920px;
	margin: auto;
}

.outercontainer{
      height:100%;
      width:100%
}

.container {
	width:960px;
	margin: 0 auto;
		border-left:solid #000;
		border-right:solid #000;
background-color:#AAADAD;

}

.header {
	background-image:url(Website%20Specific%20Resources/New_Banner_.png);
	height: 300px;
	width: 100%;
	top: 0;
	position: fixed;
}



A {
	text-decoration:none;
	font-family: "bebas";
	color: #fff;
	
}

li {
	list-style:none;
	float:left;
	padding-right:50px;
	margin-left:25px;
	padding-top:15px;
	font-size:24px;
	
	
}

.nav {
	float: inherit;
	position: absolute;
}
.content {
font-family: "bebas";
width: 900px;
background-color:#AAADAD;

	
}

<!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>Index</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>

	<div class="header">
    	<div class="container">
       
            
    <div class="nav">
    	<ul>
        <li><a href="#">Home </a></li>
        <li><a href="#">About  Us </a></li>
        <li><a href="#">Products </a></li>
        <li><a href="#">Gallery </a></li>
        <li><a href="#">Contact  Us </a></li>
        </ul>
        
        </div>
        </div>
        </div>
        <div class="outercontainer">
        <div class="container">
        <div class="content" >
          <p>asdasdasdasdaf</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>asdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasda</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>sdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdaf</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
       
        </div>
        </div>
        </div>
</body>
</html>

提前致谢。

最佳答案

据我了解，您希望导航栏文本响应并保持在一行上，对吗？

首先，尝试将以下 css 更改为如下内容:

body {
background-image:url(Website%20Specific%20Resources/Background.png);
font: 100%/1.5 serif; /* 16px */
width:1920px;
margin: auto;
}

li {
list-style:none;
float:left;
font-size:1.5em;
font-size:3vw;
padding:0 1%;
width:15%;
}

.nav {
float: inherit;
position: absolute;
width:100%;
}

使用 em 和 vw 的组合来处理字体大小(但应该注意 vw 或视口(viewport)宽度在所有浏览器中都不起作用(see here)。对于不喜欢它的浏览器, em 可以尝试根据您为正文设置的任何字体大小来处理它。

或者(或者，实际上，另外——随心所欲地讨论)，当涉及到字体大小时，您可以使用媒体查询来处理较小的视口(viewport)/屏幕尺寸。例如:

 @media (max-width: 600px) {
    body { font: 80%; }
}

您可以根据需要放大或缩小尺寸。如果将它设置在正文上，则不必重写 li 或 nav css，因为 em 单元会做出相应的响应。除了 em，我会避免在任何地方设置字体大小，因为 px 没有太大的灵 active 。

也就是说，在这之后，您真的应该为移动设备设置不同的断点，例如，堆叠菜单或使用汉堡菜单图标半隐藏它，否则文本会变得非常、非常、非常小.

关于html - 移动横幅上 float 的替代方案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37743390/

25

4

0

文章推荐： ios - SCNNode 方向而不是 eulerAngles

文章推荐： c++ - 协助澄清我的老师要我用多维数组做什么(C++)

显示透明背景的 Adsense 横幅
相信我，我在 Adsense 论坛(西类牙语和英语)中问过这个问题，还检查了以下资源和问题: 1 - 2 - 3 - 4 我有一个实际与 AdMob 配合使用的 AdSense 帐户。我们在 Andr
youtube - 单击播放按钮时如何将标题扩展到视频的标题/横幅？
我想创建一个标题图像/横幅，单击播放图像后，它会垂直扩展以播放YouTube上托管的视频。此页面准确显示了我要执行的操作: blendedlearningnow.com/about。我不确定这是否
Jquery slider 横幅
这里有一个漂亮的 Flash 横幅:http://osc4.template-help.com/drupal_30779/ 。我想知道是否有一个 jquery 库可以让我达到同样的效果。 (点击、滑动
永远延伸的 HTML 横幅
我在一个宽度为 960px 的容器 div 中有一个标题。页眉包含几个完全位于页面中央的 Logo 。我想有一个背景渐变永远延伸到标题后面。出现问题是因为渐变横幅受限于 960px 的宽度。我尝试将横
php - 创建用户可以自定义的页眉/横幅
有谁知道是否可以创建一个功能标题生成器，使用户能够使用颜色、图像和文本对其进行自定义？然后保存并添加到他们的网站？ I have created a feature banner demo here
从左向右延伸的 css 横幅
通常在我的网页中，我会有一个 #wrapper DIV 来包装整个页面并设置为如下内容: #wrap {position: relative; width: 1000px; display: bloc
带有叠加图像和文本的 html 横幅
我正在寻找一种动态创建可以放置在其他页面上的横幅的方法。横幅包含一个背景图像、两个重叠图像和两个位于该背景图像之上的文本标签。是不是只能用绝对定位来实现元素的叠加？我如何确保横幅本身相对放置在集成页
Jquery 横幅 slider
我有一个 900 x 80 的标题区域，以及一个适合该区域左上角的 175 x 75 Logo 。我想要做的是使用 jquery 将 Logo 从标题区域的右侧移动到左侧，然后卡住并设置在左侧。我知道
Admob 横幅，如何仅在主页上显示
我成功地在页脚上显示智能横幅，然后将其处理掉。我的问题是显示在应用程序的所有页面上。我的问题是:如何只显示在一页上？ @override void initState() { super.i
flash - 如何添加链接到 Flash 横幅
我主要是一名开发人员，不知道使用 Adobe Flash CS4。是否有一种简单的方法可以将链接添加到 Flash 横幅。我有 .flv 文件，其中包含库中的一些项目和两层。请给我一步一步的指示
web - 在响应式布局中处理 Adsense 横幅
如何在响应式布局中处理 Adsense 横幅？据我从 Adsense TOS 中了解到，我几乎不允许在客户端对横幅做任何事情，所以我不能在客户端将横幅切换到较小的分辨率，如果它是低分辨率的. 似乎我
java - 如何在Java中使用v3数据Api插入YouTube channel 横幅？
ChannelBannerResource chBannerResource = new ChannelBannerResource(); chBannerResource.setKind("yout
javascript - 横幅 javascript 变得更快
下面附有代码，我正在尝试使用 javascript 制作横幅。使用 setInterval 我做了一个循环，一个接一个地显示 3 个 div。我遇到的问题是，当循环结束时，有一个按钮显示“返回”，
java - 在哪里放置 AdMob 横幅？
我即将在拥有 1000 个活跃用户的应用程序中实现 AdMob 横幅。我有 1 个 main Activity，其中包含 5 个 fragment，每个 fragment 代表不同的选项卡。我应该
java - 我无法在我的应用程序中显示 AdMob 横幅
我尝试在我的应用中实现 AdMob 横幅，但它没有显示。我已经使用了横幅，并且总是使用相同的方式..我有一个带有 View 的 FrameLayout 。此 FrameLayout 位于 Linear
java - Mobclix 横幅 NullPointerException？
我在我的第一款游戏中使用 Andengine 与 Mobclix 结合使用，每当我尝试运行该应用程序时，我都会在 LogCat 中收到巨大错误。我到处都搜索过，但似乎找不到答案。 FATAL EXCE
javascript - 在更改任何表单元素后显示 div 横幅
JS: document.getElementsByTagName("input, select, textarea, option, optgroup, fieldset, label").onch
android - 在页面底部添加一个不重叠内容的 Admob 横幅
我想在页面底部安装一个横幅，但它与主屏幕的内容重叠。在主屏幕中有很多内容并且有滚动。有人知道为什么吗？谢谢。 XML android:id="
java - 布局顶部的 Admob 横幅
我想在屏幕顶部显示横幅，但是有问题。在我的代码中(这不是我的代码，因为我正在学习过程中)我有两个选择。在屏幕底部的屏幕下方或上方显示横幅。 public void showBanner(fin
android - 在屏幕底部显示 AdMob 横幅
我的 AdMob 横幅显示在屏幕顶部而不是底部。这是我的代码: adView = new AdView(mSingleton); adView.setAdSize(AdSize.SMART_BANN

首页

博学

6Ren·AI

商城

html - 移动横幅上 float 的替代方案