我的自制游戏机出了问题。
我有一张关于错误的图片。
由于div的宽度,|
太远了。我不知道如何解决这个问题。
任何帮助表示赞赏。
我的代码:
HTML
<div class="container">
<div class="console">
<div class="console-body">
<div id="typer"></div><div id="typed-cursor">|</div>
</div>
</div>
</div>
CSS
body {
margin:0;
padding:0;
background-color:#262626;
}
.container {
max-width:800px;
margin-left:auto;
margin-right:auto;
}
.console {
position: fixed;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -400px;
background-color:black;
width:800px;
height:400px;
border:solid 2px #444444;
overflow-y: auto;
}
.console #typer {
padding:0;
margin:0 0 0 5px;
color:#00FFFF;
display:inline-block;
}
#typed-cursor{
font-weight: 100;
display:inline-block;
}
有什么问题?
仅供参考:该网站是假的,用于教育目的。
答案 0 :(得分:1)
对于内联块元素要巧妙地坐在一起,您需要说明元素的宽度。在这种情况下,最好将元素显示属性设置为display:inline;
这将导致元素扩展到内容的大小,从而确保光标对紧密>导电型测量仪
.console #typer {
padding:0;
margin:0 0 0 5px;
color:#00FFFF;
display:inline;
}
#typed-cursor{
opacity: 1;
font-weight: 100;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
-ms-animation: blink 0.7s infinite;
-o-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
display:inline;
}
或者,您可以将#typed-cursor的宽度设置为5px(或更小)。
width: 5px;
答案 1 :(得分:0)
添加浮动:左;到.console #typer CSS