未按預期定位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

回答

相關問題