0
Ich habe Probleme beim Positionieren dieser Elemente auf meiner Seite, es soll wirklich einfach sein und ich verstehe nicht, warum sie sich so verhalten.Probleme Positionierelemente
Ich versuche, die Tasten auf der linken Seite ausgerichtet werden, mit den entsprechenden zufällig generierten Zahlen auf der rechten Seite von ihnen. Aber wenn ich versuche, ein einzelnes Element zu bewegen (egal welchen Selektor ich benutze), bewegen sie sich alle gleichzeitig, hier ist mein Code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Main.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<button id="DemoButton" class="button button5" onclick="myFunction()">D20</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = Math.floor((Math.random() * 20) + 1);
document.getElementById("demo").innerHTML = x;
}
</script>
<button id="DemoButton2" class="button button5" onclick="myFunction1()">D12</button>
<p id="demo1"></p>
<script>
function myFunction1() {
var x = Math.floor((Math.random() * 12) + 1);
document.getElementById("demo1").innerHTML = x;
}
</script>
<button id="DemoButton3" class="button button5" onclick="myFunction2()">D8</button>
<p id="demo2"></p>
<script>
function myFunction2() {
var x = Math.floor((Math.random() * 8) + 1);
document.getElementById("demo2").innerHTML = x;
}
</script>
<button class="button button5 demobutton4" onclick="myFunction4()">D6</button>
<p id="demo4"></p>
<script>
function myFunction4() {
var x = Math.floor((Math.random() * 6) + 1);
document.getElementById("demo4").innerHTML = x;
}
</script>
<button id="DemoButton4" class="button button5" onclick="myFunction3()">D4</button>
<p id="demo3"></p>
<script>
function myFunction3() {
var x = Math.floor((Math.random() * 4) + 1);
document.getElementById("demo3").innerHTML = x;
}
</script>
</body>
</html>
und die CSS
#demo {
display:inline;
}
#demo1 {
display:inline;
}
#demo2 {
display:inline;
}
#demo4 {
display:inline;
}
#demo3 {
display:inline;
}
.demobutton4 {
margin-top: 1px;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button5 {
background-color: white;
color: black;
border: 2px solid #555555;
}
.button5:hover {
background-color: #555555;
color: white;
}
Vielen Dank für jede Hilfe, die ich bekommen kann.
Bitte fügen Sie eine Erklärung hinzu, warum dieser Code dem OP hilft. Dies wird helfen, eine Antwort zu liefern, von der zukünftige Zuschauer lernen können. Weitere Informationen finden Sie unter [Antwort]. –
Danke für die Hilfe, das funktioniert perfekt! – firewire167