看不到我网站上的人力资源线
看不到我网站上的人力资源线
提问于 2015-01-11 16:20:16
我看不到页面上的<hr>行。我添加了导航，现在<hr>行已经离开了.
我试着删除导航但什么也没发生。
代码：
*{
padding: 0px;
margin: 0px;
font-family: Raleway;
line-height: 20px;
}
body{
background-image: url(images/hintergrund.png);
}
section{
margin-top: 50px;
width: 1100px;
background: white;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
margin-left: auto;
margin-right: auto;
padding: 20px;
background-image: url(images/grau.gif);
}
article{
width: 100%;
}
article:after{
content: '';
display:block;
clear: both;
}
.bild{
height: 200px;
width: 200px;
float: left;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
overflow: hidden;
}
.bild:hover{
cursor:pointer;
}
.text{
float: right;
width: 860px;
word-wrap: break-word;
height: 200px;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
background-color: white;
}
hr{
margin-top: 50px;
margin-bottom: 50px;
border: 0.5px solid black;
}
nav{
width: 100%;
}
nav ul{
background-color: black;
margin: 0px;
padding: 0px;
text-align: center;
}
nav ul li{
display: inline-block;
}
nav ul li a{
display: block;
padding: 20px;
transition: all 0.5s;
color: white;
text-decoration: none;
}
nav ul li a:hover{
background-color: white;
color: black;
}<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="index.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.bild').cycle({
fx: 'turnDown',
next: '.bild',
timeout: 0
});
});
</script>
</head>
<body>
<nav>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Produkte</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<section>
<article>
<div class="bild">
<img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
</div>
<div class="text">
asd
</div>
</article>
<hr>
<article>
<div class="bild">
<img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
</div>
</article>
</section>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-01-11 16:26:32
设置border-top并使其从0.5变为1
hr {
margin-top: 50px;
margin-bottom: 50px;
border-top: 1px solid black;
}演示- http://jsfiddle.net/r9ag0L1n/
* {
padding: 0px;
margin: 0px;
font-family: Raleway;
line-height: 20px;
}
body {
background-image: url(images/hintergrund.png);
}
section {
margin-top: 50px;
width: 1100px;
background: white;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0, 0, 0, 0.75);
margin-left: auto;
margin-right: auto;
padding: 20px;
background-image: url(images/grau.gif);
}
article {
width: 100%;
}
article:after {
content: '';
display: block;
clear: both;
}
.bild {
height: 200px;
width: 200px;
float: left;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0, 0, 0, 0.75);
overflow: hidden;
}
.bild:hover {
cursor: pointer;
}
.text {
float: right;
width: 860px;
word-wrap: break-word;
height: 200px;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0, 0, 0, 0.75);
background-color: white;
}
hr {
margin-top: 50px;
margin-bottom: 50px;
border-top: 1px solid black;
}
nav {
width: 100%;
}
nav ul {
background-color: black;
margin: 0px;
padding: 0px;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 20px;
transition: all 0.5s;
color: white;
text-decoration: none;
}
nav ul li a:hover {
background-color: white;
color: black;
}<nav>
<ul>
<li><a href="#">Startseite</a>
</li>
<li><a href="#">Produkte</a>
</li>
<li><a href="#">Kontakt</a>
</li>
</ul>
</nav>
<section>
<article>
<div class="bild">
<img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
</div>
<div class="text">asd</div>
</article>
<hr>
<article>
<div class="bild">
<img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
</div>
</article>
</section>
Stack Overflow用户
发布于 2015-01-11 16:24:43
有些浏览器不能呈现小于1px的边框。他们可以上上下下，以正确地显示边界。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27889286
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号