gpt4 book ai didi

html - CSS div 样式在 HTML 中不起作用

转载 作者:太空宇宙 更新时间:2023-11-03 23:04:27 25 4
gpt4 key购买 nike

我正在尝试使用以下 CSS 将边框应用于我网页中的几个 DIV:

.column-left{ float: left; width: 20%;}
.column-right{ float: right; width: 20%; visible:false;}
.column-center{ display: inline-block; width: 60%;}

a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}

#test{ margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid;
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:1px;
border-color:#000000;
background-color: yellow;
}

在我的 html 中有这样的东西:

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="cols.css">
<title>Test</title>
</head>
<body>
<div>
<div class="column-center">...</div>
<div class="column-left"><a href="#"> Link 1 </a><br><a href="#"> Link 2 </a><br><a href="#"> Link 3 </a><br><a href="#"> Link 4 </a><br>
</div>
<div class="column-right"> ... </div>
</div><div id="test"> ... </div>
</body>
</html>

#test 中的设置不起作用,我无法找出原因。有什么想法吗?

编辑:如果我将#test 的属性放在另一个 CSS 文件中,它可以正常工作。编辑:添加相关的 HTML 代码。

最佳答案

您的 border-style 属性应该是所有边框属性的下一个:示例:

margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:1px;
height: 100px;
border-style:solid;
border-color:#000000;
background-color: yellow;

最好使用速记值:

margin:0 auto;
height: 100px;
border:1px solid #000;
border-top:0;
background: rgb(255,255,0);

关于html - CSS div 样式在 HTML 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35239961/

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