英文:
Centering some buttons
问题
<section class="mainContent">
<button id="result">结果</button>
<button id="clear">C</button>
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="four">4</button>
<button id="five">5</button>
<button id="six">6</button>
<button id="seven">7</button>
<button id="eight">8</button>
<button id="nine">9</button>
<button id="zero">0</button>
<button id="plus">+</button>
<button id="minus">-</button>
<button id="multiply">*</button>
<button id="divide">/</button>
<button id="equal">=</button>
<button id="comma">,</button>
<input type="text" placeholder="您的计算">
</section>
英文:
I am a beginner-ish front end Developer, and I have done something with my css stylesheet that whatever I do I cant seem to get my buttons on the page to be aligned as if it was a calculator? I know many of you would know this so, thank you for your help forward.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.mainContent button {
font-family: inherit;
padding: 1em 2em;
border: 3px solid black;
width: 2em;
background-color: #edf2fb;
color: black;
border-radius: 0.35em;
font-size: 1.2em;
margin: 0.1em auto;
display: flex;
justify-content: center;
}
<!-- language: lang-html -->
<section class="mainContent">
<button id="result">Result</button>
<button id="clear">C</button>
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="four">4</button>
<button id="five">5</button>
<button id="six">6</button>
<button id="seven">7</button>
<button id="eight">8</button>
<button id="nine">9</button>
<button id="zero">0</button>
<button id="plus">+</button>
<button id="minus">-</button>
<button id="multiply">*</button>
<button id="divide">/</button>
<button id="equal">=</button>
<button id="comma">,</button>
<input type="text" placeholder="Your calculations">
</section>
<!-- end snippet -->
How do you do this? They are just lined up in the center one by one going down!
I tried all this justify content, text align, grid but I cant seem to get any to work
答案1
得分: 3
你可以使用display:grid;和grid-template-columns属性来对mainContent类进行设置，以正确对齐按钮。此外，我将input元素放入具有calculation类的不同div中，并为其提供了内联CSS值。最后，我添加了display:flex;和justify-content:center;属性，以使input元素（.calculation类）居中对齐。希望对您有帮助。
英文:
You can use display:grid; and grid-template-columns attribute to mainContent class not to .mainContent button class for aligning the buttons properly. Additionally i put the input element in to the different div which has calculation class and i gave it inline css values. Finally added display:flex; and justify-content:center; attributes for aligning the input element (.calculation class) to the center. I hope it works for you.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.mainContent button {
font-family: inherit;
padding: 1em 2em;
border: 3px solid black;
background-color: #edf2fb;
color: black;
border-radius: 0.35em;
font-size: 1.2em;
display: block;
margin: 0.1em;
}
.mainContent {
display: grid;
grid-template-columns: auto auto auto auto;
justify-content: center;
}
.calculation {
display: flex;
justify-content: center;
}
<!-- language: lang-html -->
<div class="calculation"><input style="width: 410px; height: 60px;" type="text" placeholder="Your calculations">
</div>
<section class="mainContent">
<button id="result">Result</button>
<button id="clear">C</button>
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="four">4</button>
<button id="five">5</button>
<button id="six">6</button>
<button id="seven">7</button>
<button id="eight">8</button>
<button id="nine">9</button>
<button id="zero">0</button>
<button id="plus">+</button>
<button id="minus">-</button>
<button id="multiply">*</button>
<button id="divide">/</button>
<button id="equal">=</button>
<button id="comma">,</button>
</section>
<!-- end snippet -->
答案2
得分: 0
以下是您提供的代码的中文翻译：
.mainContent button {
font-family: inherit;
border: 3px solid black;
padding: 25px;
margin: 10px;
width: 10em;
background-color: #edf2fb;
color: black;
border-radius: 0.35em;
font-size: 1.2em;
text-align: center;
}
.mainContent {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>浏览器</title>
</head>
<body>
<input type="text" placeholder="您的计算">
<section class="mainContent">
<button id="result">结果</button>
<button id="clear">C</button>
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="four">4</button>
<button id="five">5</button>
<button id="six">6</button>
<button id="seven">7</button>
<button id="eight">8</button>
<button id="nine">9</button>
<button id="zero">0</button>
<button id="plus">+</button>
<button id="minus">-</button>
<button id="multiply">*</button>
<button id="divide">/</button>
<button id="equal">=</button>
<button id="comma">,</button>
</section>
<script src="script.js"></script>
</body>
</html>
希望这能帮助您！
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.mainContent button {
font-family: inherit;
border: 3px solid black;
padding: 25px;
margin: 10px;
width: 10em;
background-color: #edf2fb;
color: black;
border-radius: 0.35em;
font-size: 1.2em;
text-align: center;
}
.mainContent {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
<!-- language: lang-html -->
<!--
Online HTML, CSS and JavaScript editor to run code online.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Browser</title>
</head>
<body>
<input type="text" placeholder="Your calculations">
<section class="mainContent">
<button id="result">Result</button>
<button id="clear">C</button>
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="four">4</button>
<button id="five">5</button>
<button id="six">6</button>
<button id="seven">7</button>
<button id="eight">8</button>
<button id="nine">9</button>
<button id="zero">0</button>
<button id="plus">+</button>
<button id="minus">-</button>
<button id="multiply">*</button>
<button id="divide">/</button>
<button id="equal">=</button>
<button id="comma">,</button>
</section>
<script src="script.js"></script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论