-1
Warum reagiert meine Seite nicht und wie kann ich darauf reagieren? Die Tasten werden in kleinen Bildschirmen schwerfällig. [Optional] Gibt es eine Möglichkeit, die Größe der Schaltfläche zu vergrößern und gleichzeitig die Site zu erstellen? [Optional] responsive Auch kein Problem, wenn eine Lösung mit Bootstrap verfügbar ist.Schaltflächen werden in kleinen Bildschirmen schwerfällig
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Calculator.css">
</head>
<body>
<div id="container">
<div id="display">
</div>
<div id="buttons">
<button id="clear" class="btn btn-default">CLEAR</button>
<button value="/" class="btn btn-default">÷</button>
<button value="*" class="btn btn-default">x</button><br><br>
<button value="7" class="btn btn-default">7</button>
<button value="8" class="btn btn-default">8</button>
<button value="9" class="btn btn-default">9</button>
<button value="-" class="btn btn-default">-</button><br><br>
<button value="4" class="btn btn-default">4</button>
<button value="5" class="btn btn-default">5</button>
<button value="6" class="btn btn-default">6</button>
<button value="+" class="btn btn-default">+</button><br><br>
<div id="float">
<button value="1" class="btn btn-default">1</button>
<button value="2" class="btn btn-default">2</button>
<button value="3" class="btn btn-default">3</button><br><br>
<button id="zero" value="0" class="btn btn-default">0</button>
<button value="." class="btn btn-default">.</button>
<button id="equal" class="btn btn-default">=</button>
</div>
</div>
</div>
<script type="text/javascript" src="Calculator.js"></script>
</body>
</html>
CSS:
body
{
background: lightblue;
}
#container
{
text-align: center;
margin: 200px auto;
width: 10%;
}
#display
{
text-align: right;
margin-bottom: 5px;
height: 50px;
border: 2px solid gray;
background: lightblue;
}
button
{
width: 30px;
}
.btn-default
{
background: white;
color: black;
border: none;
outline-style: none;
}
.btn-default:hover
{
background: black;
color: white;
border: none;
outline-style: none;
}
#clear, #zero
{
width: 65px;
}
#equal
{
position: absolute;
margin-left: 52px;
margin-top: -87px;
height: 87px;
}
#buttons
{
display: inline-block;
}
#float
{
float: left;
}
"ungeschickt" ist keine sehr gute Definition für das, was passiert? Ist das Problem, dass Sie keine der Schaltflächen anklicken können? Oder die Schaltflächen machen nichts, wenn sie geklickt werden? Bitte bearbeiten Sie Ihre Frage. - Aus der Übersicht - –