Question

我是Html的初学者，我正在制作有关太空旅行历史的网页。我设法让网页水平滚动，但如果我放置任何标签，例如：

＆＃13;

<p>"random text"</p>

＆＃13;

它在页面中放置空格或使页面正确滚动，我该如何解决？

以下是代码：

＆＃13;

<!DOCTYPE html>
<html>
<style>

@import url('https://fonts.googleapis.com/css?family=Iceland');

* {
  margin:0;
}

html, body {
  height:100%
}

body {
  text-align:center
}


.view {
  height:100%;
}

.content{
  background-image: url("http://24.media.tumblr.com/2157bb201b8f13db970a39af62b92f88/tumblr_n52b2hmsH11shpedgo1_500.gif");
  background-size:     cover;
  background-repeat:   no-repeat;
  background-position: center center;
  color:orange;
  height:100%;
  width:100%;
  display:inline-block;
}

.scon {
  overflow:auto;
  height:100%;
  white-space:nowrap;
  font-size:0px
}

.hed {
  font-family:Iceland;
  font-size:60px;
}

.hed2 {
  font-family:Iceland;
  font-size:30px;
}

</style>

<body>
  <div class="wrap">
  <div class="view">

  <div class="scon">
   <div class="content">
   <h1 class="hed">Sputnik 1</h1>
   <h3 class="hed2">1957 - 1958</h3>
   </div>
   <
   <div class="content">
   <h1 class="hed">Explorer 1</h1>
   <h3 class="hed2">1958 - 1970</h3>
 </div>
</div>
</div>
</div>
</body>
</html>

＆＃13;

谢谢！

Answer 1

如果您在p内添加了.scon标记（看似是您想要的），则会从font-size: 0继承.scon，所以它仍然是隐形的。更改字体大小并且有p标记...

＆＃13;

* {
  margin: 0;
}

html,
body {
  height: 100%
}

body {
  text-align: center
}

.view {
  height: 100%;
}

.content {
  background-image: url("http://24.media.tumblr.com/2157bb201b8f13db970a39af62b92f88/tumblr_n52b2hmsH11shpedgo1_500.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  color: orange;
  height: 100%;
  width: 100%;
  display: inline-block;
}

.scon {
  overflow: auto;
  height: 100%;
  white-space: nowrap;
  font-size: 0px
}

.hed {
  font-family: Iceland;
  font-size: 60px;
}

.hed2 {
  font-family: Iceland;
  font-size: 30px;
}

p {
  font-size: 12px;
}

＆＃13;

<div class="wrap">
  <div class="view">

    <div class="scon">
      <div class="content">
        <h1 class="hed">Sputnik 1</h1>
        <h3 class="hed2">1957 - 1958</h3>
        <p>random text</p>
      </div>
      < <div class="content">
        <h1 class="hed">Explorer 1</h1>
        <h3 class="hed2">1958 - 1970</h3>
    </div>
  </div>
</div>
</div>

＆＃13;

无法在水平页面中添加标签

1 个答案: