CSS - verschiedene Größe Tasten Ausrichtung

-1

Ich möchte das beheben, aber ich bin mir nicht ganz sicher, wie es geht. Die anderen Tasten müssen so eingestellt werden, dass sie durch die Schaltfläche "equal" nicht geteilt erscheinen. Vielen Dank im Voraus! misaligned calculator buttons CSS - verschiedene Größe Tasten Ausrichtung

Meine CSS:

body{ 
 
    margin:0; 
 
    padding: 0; 
 
} 
 
form{ 
 
    width:280px; 
 
    margin: auto; 
 
    
 
} 
 

 

 
button{ 
 
    height: 40px; 
 
    width: 60px; 
 
    font-size: 1.5em; 
 
    background-color: #ddd; 
 
    border: none; 
 
    float:left; 
 
    margin: 2.3px; 
 
    
 
    
 
    
 
    
 
} 
 
button:hover{ 
 
    background-color: #bbb; 
 
} 
 

 
button:active{ 
 
    background-color:#aaa; 
 
} 
 

 
input{ 
 
    height: 40px; 
 
    width: 246px; 
 
    font-size: 1.5em; 
 
    background-color: beige; 
 
    border: none; 
 
    padding-left: 10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head><title>JavaScript Calculator!</title></head> 
 
    <link rel="stylesheet" type="text/css" href="calccss.css"> 
 

 
    
 
<body> 
 
    <div > 
 
    <form name="calc"> 
 
    <input class="inputc" type="text" name="panel" value="0" readonly="readonly"/> 
 

 
    
 
    
 
    
 
    
 
    <span><button type="button" onclick="onMouseClick()" value="C" name="c">C</button></span><span><button type="button" onclick="onMouseClick()" value="/" name="div">/</button></span><span><button type="button" value="X" onclick="onMouseClick()" name="x">X</button></span><span><button type="button" onclick="onMouseClick()" value="-" name="minus">-</button></span> 
 
    
 
    <span><button type="button" onclick="onMouseClick()" value="7" name="seven">7</button></span> <span><button type="button" onclick="onMouseClick()" value="8" name="eight">8</button></span><span><button type="button" value="9" onclick="onMouseClick()" name="nine">9</button></span><span><button type="button" onclick="onMouseClick()" value="+" name="plus">+</button></span> 
 
    
 
    <span><button type="button" onclick="onMouseClick()" value="4" name="four">4</button></span> <span><button type="button" onclick="onMouseClick()" value="5" name="five">5</button></span><span><button type="button" onclick="onMouseClick()" value="6" name="six">6</button></span><span><button type="button" style="height:128px" onclick="onMouseClick()" value="=" name="equals">=</button></span> 
 
    
 
    <span><button type="button" value="1" onclick="onMouseClick()" name="one">1</button></span> <span><button type="button" onclick="onMouseClick()" value="2" name="two">2</button></span><span><button type="button" onclick="onMouseClick()" value="3" name="three">3</button></span> 
 
    
 
    <span><button style ="width:125px" type="button" onclick="onMouseClick()" value="0" name="zero">0</button></span> <span><button type="button" onclick="onMouseClick()" value="coma" name="coma">,</button></span> 
 
    
 
    </form></div> 
 
     
 
<script src="calcjs.js"></script> 
 
</body> 
 

 

 

 
</html>

Quelle

2016-10-02 Giorgos Lamprakis

Sie schwimmen könnte: rechts gleich die Taste.

Sie müssen die Breite Ihres Formularelements anpassen, um es ausgerichtet zu halten, und ich würde empfehlen, mit vollen Pixelmengen von Rand usw. zu haften, da nicht alle Browser partielle Pixel gleich behandeln.

Sie können auch das CSS so ändern, dass die Spannen schweben, oder einfach die Spannen ganz entfernen.

Quelle

2016-10-02 22:46:27 patrickhawley

Hier ist die aktualisierte html

<span><button type="button" style="height:128px;float:right;" onclick="onMouseClick()" value="=" name="equals">=</button></span>

Hier ist die plunkr

Quelle

2016-10-02 22:56:45 GANI

Dank! Ich habe Rand rechts hinzugefügt: 23px; Rand oben: 3px; um es ein bisschen besser auszurichten. –

CSS - verschiedene Größe Tasten Ausrichtung

Antwort

Verwandte Themen