gpt4 book ai didi

css - 覆盖为无序列表提供 1em 边距的用户代理 CSS 样式表规则的最佳方法是什么?

转载 作者:技术小花猫 更新时间:2023-10-29 10:14:00 25 4
gpt4 key购买 nike

我正在开发一个网络应用程序,它有一个类似于 facebook 顶部蓝色条的 topBar。我在该栏的 div 中有一个无序列表,用于列出一些元素,如收件箱、通知等。UL 有一个 1em 边距,由我的浏览器的用户代理样式表定义。这是一个问题,因为它将我的 topBar 向下推了 1em。我如何覆盖它以使 ul = 0 的边界?我读到覆盖用户代理样式表是一个坏主意,所以我很想知道什么是最好的。谢谢。

编辑:这是 CSS 文件:

body {

margin:0px;
padding:0px;
}

#topBar{
background-color:#CCCCCC;
height: 50px;
width:100%;
z-index:-1;

}

#mainNav{
margin:0 auto;
width:900px;
}
#logo{
float:left;
}

#mainNav ul li{
float:left;
border:0px;
margin:0;
padding:0;
font-size:10px
}

和 html:

<!DOCTYPE html>
<html>
<head>
<title>ff</title>
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
</head>
<body>
<div id="topBar">
<div id="mainNav">
<div id="logo"><%=image_tag("livecove.jpg") %></div>
<ul>
<li>Inbox</li>
</ul>
</div>
</div>

<%= yield %>
</body>
</html>

最佳答案

如果您能够编辑有问题的样式表

如果用户代理样式表的样式导致它应该修复的浏览器出现问题,那么您可以尝试删除有问题的样式并进行测试以确保它不会在其他地方产生任何意外的不利影响。

如果没有,请使用修改后的样式表。修复浏览器怪癖是这些工作表的用途 - 它们修复问题,而不是引入新问题。

如果您不能编辑有问题的样式表

如果您无法编辑包含违规行的样式表,您可以考虑使用 !important 关键字。

一个例子:

.override {
border: 1px solid #000 !important;
}

.a_class {
border: 2px solid red;
}

和 HTML:

<p class="a_class">content will have 2px red border</p>
<p class="override a_class">content will have 1px black border</p>

Live example

尝试仅在您真正需要的地方使用 !important - 如果您可以重新组织您的样式,这样您就不需要它,这将是更可取的。

关于css - 覆盖为无序列表提供 1em 边距的用户代理 CSS 样式表规则的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4873867/

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