Question

我无法在页面上看到<hr>行。我添加了导航，现在<hr>行已离开......

我试图删除导航但没有任何反应。

代码：

＆＃13;

*{
    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;
}

＆＃13;

<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>

＆＃13;

Answer 1

设置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>

Answer 2

某些浏览器无法渲染小于1px的边框。它们可以向上或向下舍入以正确显示边界。

在我的网站上看不到hr行

2 个答案: