Question

我正在尝试为计算器编写基本布局。为什么当我尝试运行网页时，它都是空的!!不确定哪一个覆盖了代码。有人可以帮我吗这是我的HTML代码。

<!doctype>
<html>
<head>
<link rel="stylesheet"  type="text/css" href="css/calculater.css"/>
</head>
<body>
<div id="screen_one">
<div id="numberholder"></div>
<div id="numholder">
    <ul>
          <li class="num">1</li>
          <li class="num">2</li>
          <li class="num">3</li>
           <li class="num">4</li>
          <li class="num">5</li>
          <li class="num">6</li>
           <li class="num">7</li>
          <li class="num">8</li>
          <li class="num">9</li>
          <li class="num">0</li>
          <li class="num">+</li>
          <li class="num">-</li>
          <li class="num">=</li>
          <li class="num">/</li>
          <li class="num">*</li>
      </ul>
    </div>
</div>
</body>
</html>

这是我的css。

body,html{
height:100%;
width:100%;
padding:0;
margin:0;
}
#numberholder{
position: absolute;
top: 0;
left: 0;
width:100%;
height:10%;
}
#numholder{
position:absolute;
top:10%;
left:0;
height:90%;
font-size:0;
}
.class{
display:inline-block;
width:33.3%;
height:20%;
font-size:13px;
text-align:center;
}

Answer 1

<!doctype>
<html>
<head>
<style>
    body,html{
height:100%;
width:100%;
padding:0;
margin:0;
}
#numberholder{
position: absolute;
top: 0;
left: 0;
width:100%;
height:10%;
}
#numholder{
position:absolute;
top:10%;
left:0;
height:90%;
font-size:1em;
}
.class{
display:inline-block;
width:33.3%;
height:20%;
font-size:13px;
text-align:center;
}
</style>
</head>
<body>
<div id="screen_one">
<div id="numberholder"></div>
<div id="numholder">
    <ul>
          <li class="num">1</li>
          <li class="num">2</li>
          <li class="num">3</li>
           <li class="num">4</li>
          <li class="num">5</li>
          <li class="num">6</li>
           <li class="num">7</li>
          <li class="num">8</li>
          <li class="num">9</li>
          <li class="num">0</li>
          <li class="num">+</li>
          <li class="num">-</li>
          <li class="num">=</li>
          <li class="num">/</li>
          <li class="num">*</li>
      </ul>
    </div>
</div>
</body>
</html>

------------------------------输出---------------- ---------------

1
2
3
4
5
6
7
8
9
0
+
-
=
/
*

Answer 2

删除font-size:0;中的#numholder或将其更改为更高的数字：

示例 - font-size:1em;

Fiddle

Answer 3

更改以下css

#numholder {
    font-size: 0;
}

要

#numholder {
    font-size: 12px;
}

或从css中删除以下css代码

#numholder {
    font-size: 0;
}

Answer 4

你做了 font-size：0

font-size:0;

网页Css错误..没有显示任何内容

4 个答案: