为什么我能够点击远离它的链接？

-2

在我一直在处理的页面上，当鼠标不在其中时，可以点击后退按钮。我知道这是定位或保证金，但我找不到问题的根源。我提出了一个JSbin的问题。将光标置于后退按钮的右侧，您将看到光标更改。我发布在JSbin上的内容不是我的实际代码，因为我使用的是PHP。我会在这里发布实际代码：为什么我能够点击远离它的链接？

<?php 
/*session_start(); 
if(!isset($_SESSION["joke"])){ 
header("Location: insidejoke.php"); 
}*/ 
?> 

<!Doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
<title>Lorem Ipsum Translator</title> 
</head> 
<body> 
<style> 
body{ 
    background-color: #FBF6D9; 
    margin:0; 
    padding: 0; 
    } 
#inputField{ 
margin-top: 150px; 
padding: 5px; 
box-sizing: border-box; 
width: 90%; 
height: 300px; 
border: red 1px solid; 
resize: none; 
font-size: 20px; 
color: #33cc33; 
text-shadow: 1px 1px gray; 
} 

#inputField:focus{ 
border:0; 
outline-color: red; 
background-color: #F0FFFF; 
box-shadow: 0 0 20px gray; 
}.but{ 
background-color: #ccccff; 
border-radius: 10px; 
box-shadow: 5px 5px 5px gray; 
font-size: 20px; 
color: #4d4d4d; 
width: 100px; 
height: 50px; 
cursor: pointer; 
margin: 10px; 
margin-left: 0px; 
position: relative; 
} 
::-webkit-input-placeholder { 
    font-weight: bold; 
    color: #33cc33; 
    font-size: 15px; 
    text-shadow: none; 
} 
::-moz-placeholder { 
    font-weight: bold; 
    color: #33cc33; 
    font-size: 15px; 
    text-shadow: none; 
} 
#containertranslation{ 
margin-top: 150px; 
width: 90%; 
height: 300px; 
background-color:white; 
border: 1px red solid; 
} 
#translation{ 
    color: #33cc33; 
    font-size: 30px; 
    padding: 5px; 
    } 
#back:hover{ 
color: black; 
} 
#goback{ 
    position: absolute; 
left: 25px; 
top: 10px; 
} 
#submit:hover{ 
color: black; 
} 
a{ 
text-decoration: none!important; 
} 
#back{ 
margin-top: 15px; 
} 
.container{ 
width: 95%!important; 
} 
@media (max-width: 576px){ 
    #inputField, #containertranslation{ 
     margin-top: 10px; 
     height: 250px; 
    } 
} 
</style> 
<?php 
if(isset($_SESSION["fromsite"])){ 
echo "<a href='projects.html'><div id='back'><p id='goback'>Back!</p></div></a>"; 
} 
?> 
<div class="container"> 
    <div class="row"> 
    <div class="col-sm-6"> 
<form id="translateform" action="process.php" method="post"><?php 
echo "<textarea maxlength='3000' id='inputField' placeholder='Enter your Lorem Ipsum text here:' name='translate'>"; 
if(isset($_SESSION['text'])){ 
    echo $_SESSION['text']; 
    } 
    echo "</textarea>"; 
    echo '<input type="submit" name="submit" class="but"id="submit" value="Submit!">' 

     ?> 
</form> 
</div> 
<div class="col-sm-6"> 
<?php 
echo "<div id='containertranslation'><p id='translation'>"; 
if(isset($_SESSION['translation'])){echo $_SESSION['translation'];}//if translated 
else{echo "Translation: ";}//if not, empty field 
echo "</p></div>";//adds div with translation 
echo "<a href='projects.html'><div id='back'class='but'><p id='goback'>Back!</p></div></a>"; 


?> 
</div> 
</div> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script> 
</body> 
</html>

我该如何解决这个问题？

来源

2016-07-25 Nick Solonko

请包括代码就在这里。 – nicael

通过验证器运行你的html。你有语法错误。 –

'div＃back'是[block-level元素]（https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements）。其宽度扩展到其容器的宽度。 – showdev

试试这个CSS规则：

.but { display:inline-block }

来源

2016-07-25 20:47:03 kapantzak

为什么我能够点击远离它的链接？

回答

相关问题