未按预期定位DIV

我的自制控制台出现问题。未按预期定位DIV

我有一张关于什么是错的图片。由于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; 
}

有什么不对？

供参考：该网站是假的，用于教育目的。

来源

2014-03-05 Mike

网站链接在哪里？ –

你能告诉我们在jsbin，jsfiddle或任何地方运行的代码吗？随着Inspector Element的浏览器将更容易帮助你！ –

其实我试图回购你的问题，但不是。检查这[**小提琴**]（http://jsfiddle.net/praveen_jegan/y4mMD/），也许一些其他的CSS可能会影响。 – Praveen

对于内联块元素要整齐地坐在一起，你需要声明元素的宽度。在这种情况下，最好将您的元素显示属性设置为display:inline;这将导致元素扩展到内容的大小，以确保光标对typer是严格的。

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

来源

2014-03-05 11:51:09

谢谢，它完美的作品。 – Mike

加上float：left;到.console #typer CSS

来源

2014-03-05 11:40:20 coliff

这不行，'|'现在保持在最前沿。 – Mike

未按预期定位DIV

回答

相关问题