HTML - ayuda por favor

ayuda por favor

Publicado por ed (2 intervenciones) el 21/06/2023 22:34:29

soy nuevo en este tema de paginas web me podran ayudar como hacer el siguiente codigo. tengo el siguiente codigo pero quisiera dejarlo como en la imagen.

<!DOCTYPE html>
<html>
<head>
<title>Calculadora</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.calculator {
width: 300px;
margin: 50px auto;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}

.calculator h2 {
text-align: center;
}

.result {
width: 100%;
height: 50px;
text-align: right;
padding: 5px;
box-sizing: border-box;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}

.button-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 10px;
}

.button {
width: 100px;
height: 40px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
line-height: 40px;
cursor: pointer;
}

.button.larger {
width: 200px;
}

.button.operator {
background-color: #f1f1f1;
}

.button.equals {
background-color: #4CAF50;
color: #fff;
}

.button.decimal {
border-radius: 3px 0 0 3px;
}
</style>
</head>
<body>
<div class="calculator">
<h2>Calculadora</h2>
<div class="result" id="result">0</div>
<div class="button-container">
<div class="button operator larger">x</div>
</div>
<div class="button-container">
<div class="button operator larger">÷</div>
</div>
<div class="button-container">
<div class="button operator">-</div>
</div>
<div class="button-container">
<div class="button">7</div>
<div class="button">8</div>
<div class="button">9</div>
<div class="button operator">+</div>
</div>
<div class="button-container">
<div class="button">6</div>
<div class="button">5</div>
<div class="button">4</div>
<div class="button operator">+</div>
</div>
<div class="button-container">
<div class="button">3</div>
<div class="button">2</div>
<div class="button">1</div>
<div class="button equals larger">=</div>
</div>
<div class="button-container">
<div class="button larger">0</div>
<div class="button decimal">.</div>
</div>
</div>
</body>
</html>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 7

Val: 247

ayuda por favor

Publicado por Alejandro (102 intervenciones) el 22/06/2023 18:34:11

Alejandro se encuentra ahora conectado en el
chat de PHP

¿Porqué no hacerlo con una tabla y botones?

<style>

	table{

		margin:auto;

td{

		position:relative;

		width:150px;

		height:50px;

	td:last-child{

		width:100px;

	input{

		position:absolute;

		top:0;

		width:100%;

		height:100%;

</style>

<table border="1">

	<tr>

		<td colspan="3"><input type="text" /></td>

		<td><input type="button" value="*" /></td>

	</tr>

	<tr>

		<td colspan="2"><input type="button" value="/" /></td>

		<td colspan="2"><input type="button" value="-" /></td>

	</tr>

	<tr>

		<td><input type="button" value="7" /></td>

		<td><input type="button" value="8" /></td>

		<td><input type="button" value="9" /></td>

		<td rowspan="2"><input type="button" value="+" /></td>

	</tr>

	<tr>

		<td><input type="button" value="6" /></td>

		<td><input type="button" value="5" /></td>

		<td><input type="button" value="4" /></td>

	</tr>

	<tr>

		<td><input type="button" value="3" /></td>

		<td><input type="button" value="2" /></td>

		<td><input type="button" value="1" /></td>

		<td rowspan="2"><input type="button" value="=" /></td>

	</tr>

	<tr>

		<td colspan="2"><input type="button" value="0" /></td>

		<td><input type="button" value="." /></td>

	</tr>

</table>

Como formular UNA BUENA PREGUNTA para obtener ayuda más rápido en LWP

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar