2015-05-01 53 views
0

在我的測試網站上做一些工作時,遇到了問題。 我已經放入了所有的代碼,因爲我不知道這個問題來自哪裏。 https://jsfiddle.net/gdz4k3wt/ 正如你可以從這個jsfiddle看到的,網站文本的頂部不能被選中,我不知道這個問題來自哪裏,所以有人可以解釋這個錯誤?無法選擇文本

HTML代碼:

.button { 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
    background: rgba(143, 152, 191, 0.4); 
 
    color: #999; 
 
    line-height: 3em; 
 
    display: block; 
 
    float: left; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    font-family: courier new; 
 
    -moz-transition: 1s linear; 
 
    -ms-transition: 1s linear; 
 
    -o-transition: 1s linear; 
 
    -webkit-transition: 1s linear; 
 
    transition: 1s linear; 
 
} 
 
.button2 { 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
    background: rgba(143, 152, 191, 0.4); 
 
    color: #999; 
 
    line-height: 3em; 
 
    display: block; 
 
    float: left; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    font-family: courier new; 
 
    -moz-transition: 1s linear; 
 
    -ms-transition: 1s linear; 
 
    -o-transition: 1s linear; 
 
    -webkit-transition: 1s linear; 
 
    transition: 1s linear; 
 
} 
 
.button3 { 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
    background: rgba(143, 152, 191, 0.4); 
 
    color: #999; 
 
    line-height: 3em; 
 
    display: block; 
 
    float: left; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    font-family: courier new; 
 
    -moz-transition: 1s linear; 
 
    -ms-transition: 1s linear; 
 
    -o-transition: 1s linear; 
 
    -webkit-transition: 1s linear; 
 
    transition: 1s linear; 
 
} 
 
.button:hover { 
 
    background: rgba(232, 107, 149, 0.4); 
 
    color: white; 
 
} 
 
.button2:hover { 
 
    background: rgba(232, 107, 149, 0.4); 
 
    color: white; 
 
} 
 
.button3:hover { 
 
    background: rgba(232, 107, 149, 0.4); 
 
    color: white; 
 
} 
 
.image { 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
.image:hover { 
 
    opacity: 0.9; 
 
    -moz-transition: 0.2s linear; 
 
    transition: 0.2s linear; 
 
} 
 
h1 { 
 
    text-align: justify; 
 
} 
 
.mainn { 
 
    width: 111em; 
 
    height: 25em; 
 
} 
 
p { 
 
    text-align: justify; 
 
} 
 
.menuu { 
 
    width: 100%; 
 
    background: rgba(143, 152, 191, 0.4); 
 
    height: 3em; 
 
    position: fixed; 
 
} 
 
body { 
 
    background-color: #333; 
 
    color: #999; 
 
    font: 12px/1.4em Arial, sans-serif; 
 
} 
 
#wrap { 
 
    margin: 10px auto; 
 
    background: rgba(143, 152, 191, 0.4); 
 
    padding: 10px; 
 
    width: 1000px; 
 
}
<body background="pictures/spacexwall.jpg"> 
 
    <div class="menuu"> 
 
    <div class="mainn"> 
 
     <a class="button" href="SpaceX.html"> Home </a> 
 
     <a class="button2" href="founder.html"> Founder </a> 
 
     <a class="button3" href="pictures.html"> Pictures </a> 
 
    </div> 
 
    </div> 
 
    <font face="helvetica"> 
 
    <div> <br></div> 
 
    <div> <br></div> 
 
    <div> <br></div> 
 
    <div id="wrap"> 
 
    <p> <h1> <div> SpaceX Falcon 9 </h1> </p> 
 
    <hr> 
 
    <p><div> Falcon 9 is a two-stage rocket designed and manufactured by SpaceX for the reliable and safe transport of satellites and the Dragon spacecraft into orbit. As the first rocket completely developed in the 21st century, Falcon 9 was designed from the ground up for maximum reliability. Falcon 9’s simple two-stage configuration minimizes the number of separation events -- and with nine first-stage engines, it can safely complete its mission even in the event of an engine shutdown. 
 
    
 
    Falcon 9 made history in 2012 when it delivered Dragon into the correct orbit for rendezvous with the International Space Station, making SpaceX the first commercial company ever to visit the station. Since then SpaceX has made a total of three flights to the space station, both delivering and returning cargo for NASA. Falcon 9, along with the Dragon spacecraft, was designed from the outset to deliver humans into space and under an agreement with NASA, SpaceX is actively working toward that goal.</div> </p> 
 
    <p> <h1> SpaceX Falcon Heavy </h1> </p> 
 
    <hr> 
 
    <p> When Falcon Heavy lifts off later this year, it will be the most powerful operational rocket in the world by a factor of two. With the ability to lift into orbit over 53 metric tons (117,000 lb)--a mass equivalent to a 737 jetliner loaded with passengers, crew, luggage and fuel--Falcon Heavy can lift more than twice the payload of the next closest operational vehicle, the Delta IV Heavy, at one-third the cost. Falcon Heavy draws upon the proven heritage and 
 
    
 
    reliability of Falcon 9. Its first stage is composed of three Falcon 9 nine-engine cores whose 27 Merlin engines together generate nearly 4 million pounds of thrust at liftoff, equal to approximately fifteen 747 aircraft operating simultaneously. Only the Saturn V moon rocket, last flown in 1973, delivered more payload to orbit. Falcon Heavy was designed from the outset to carry humans into space and restores the possibility of flying missions with crew to the Moon or Mars </p> 
 
    <p> <h1> SpaceX Dragon </h1> </p> 
 
    <hr> 
 
    <p> Dragon is a free-flying spacecraft designed to deliver both cargo and people to orbiting destinations. Dragon made history in 2012 when it became the first commercial spacecraft in history to deliver cargo to the International Space Station and safely return cargo to Earth, a feat previously achieved only by governments. It is the only spacecraft currently flying that is capable of returning significant amounts of cargo to Earth. Currently Dragon carries cargo to space, but it was designed from the beginning to carry humans. Under an agreement with NASA, SpaceX is now developing the refinements that will enable Dragon to fly crew. Dragon's first manned test flight is expected to take place in 2-3 years. </p> 
 
    </div> 
 
    <p> <h1> SpaceX Falcon 9 </h1> </p> 
 
    <hr> 
 
    <p><div> Falcon 9 is a two-stage rocket designed and manufactured by SpaceX for the reliable and safe transport of satellites and the Dragon spacecraft into orbit. As the first rocket completely developed in the 21st century, Falcon 9 was designed from the ground up for maximum reliability. Falcon 9’s simple two-stage configuration minimizes the number of separation events -- and with nine first-stage engines, it can safely complete its mission even in the event of an engine shutdown. 
 
    Falcon 9 made history in 2012 when it delivered Dragon into the correct orbit for rendezvous with the International Space Station, making SpaceX the first commercial company ever to visit the station. Since then SpaceX has made a total of three flights to the space station, both delivering and returning cargo for NASA. Falcon 9, along with the Dragon spacecraft, was designed from the outset to deliver humans into space and under an agreement with NASA, SpaceX is actively working toward that goal.</div> </p> 
 
    <p> <h1> SpaceX Falcon Heavy </h1> </p> 
 
    <hr> 
 
    <p> When Falcon Heavy lifts off later this year, it will be the most powerful operational rocket in the world by a factor of two. With the ability to lift into orbit over 53 metric tons (117,000 lb)--a mass equivalent to a 737 jetliner loaded with passengers, crew, luggage and fuel--Falcon Heavy can lift more than twice the payload of the next closest operational vehicle, the Delta IV Heavy, at one-third the cost. Falcon Heavy draws upon the proven heritage and 
 
    
 
    reliability of Falcon 9. Its first stage is composed of three Falcon 9 nine-engine cores whose 27 Merlin engines together generate nearly 4 million pounds of thrust at liftoff, equal to approximately fifteen 747 aircraft operating simultaneously. Only the Saturn V moon rocket, last flown in 1973, delivered more payload to orbit. Falcon Heavy was designed from the outset to carry humans into space and restores the possibility of flying missions with crew to the Moon or Mars </p> 
 
    <p> <h1> SpaceX Dragon </h1> </p> 
 
    <hr> 
 
    <p> Dragon is a free-flying spacecraft designed to deliver both cargo and people to orbiting destinations. Dragon made history in 2012 when it became the first commercial spacecraft in history to deliver cargo to the International Space Station and safely return cargo to Earth, a feat previously achieved only by governments. It is the only spacecraft currently flying that is capable of returning significant amounts of cargo to Earth. Currently Dragon carries cargo to space, but it was designed from the beginning to carry humans. Under an agreement with NASA, SpaceX is now developing the refinements that will enable Dragon to fly crew. Dragon's first manned test flight is expected to take place in 2-3 years. </p> 
 
    </div> 
 
    </font> 
 
</body>

+0

您的html首先看起來有很多無效的標記。我還建議使用** display:inline-block **而不是** float:left **作爲導航按鈕。 – jbutler483

+0

謝謝你的評論:) – canthandlehtml

回答

0

<div class = 'mainn'>

元素有太大的高度,並模糊文本的頂部,從而阻斷你選擇。

.mainn { 
    height: 2em; 
    width: 111em; 
} 

將解決該問題。

固定jsfiddle here

+0

非常感謝你:) – canthandlehtml

+0

你應該接受我的答案,點擊箭頭下方的勾號按鈕,如果我的答案幫助了你! –

+0

哦,對,我不知道,你走了 – canthandlehtml