Второй флажок не отображается, даже если он идентичен?

Question

<div id="Box"> 
    <div id="emailtextbox"><input type="text" size="40" /></div> 
    <div id="CheckBox1"><input type="checkbox" Name="Mr."/>Mr.</div> 
    <div id="CheckBox2"><input type="checkbox" Name="Mrs."/>Mrs.</div> 
</div> 

CheckBox 1 появляется, но CheckBox2 этого не делает. С помощью css я изменил расположение обоих флажков, чтобы убедиться, что они не были сложены друг на друга, но это не проблема. Они идентичны, поэтому я не понимаю, почему появляется только один из них.

Вот CSS, если это поможет:

#CheckBox1 { 
    margin-top: 700px; 
    width: 200px; 

} 
#CheckBox2 { 
    margin-top: 700px; 
    width: 400px; 
} 

Answer 1

Попробуйте это,

удалить

#CheckBox1 { 
    margin-top: 700px; 
} 
#CheckBox2 { 
    margin-top: 700px; 
} 

Answer 2

проверить это, ваш CSS только делает Issue

удалить

margin-top: 700px; 

DEMO

Answer 3

Попробуйте удалить огромные прибыли от стиля, они показывают!

Answer 4

Я предполагаю, что вы используете слишком много маржинальной вершины, и она проходит родительскую высоту div. Измените margin-top на 5px.

CSS

#CheckBox1 { 
    margin-top: 5px; 
    width: 200px; 

} 
#CheckBox2 { 
    margin-top: 5px; 
    width: 400px; 
}