【发布时间】：2021-08-25 18:33:50
【问题描述】：
我正在尝试让这张最终成为徽标的图像出现在桌子上方。我尝试过的所有操作都只是将图像移到其他内容旁边而不是在其上方。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
main {
background-color: #1e1f1f;
display: inline-block;
padding: 25px;
font-size: 1.4rem;
font-family: Arial, Helvetica, sans-serif;
}
#myInput {
padding: 0;
margin: 0;
border: none;
width: 100%;
display: block;
font-size: 1.4rem;
text-align: center;
}
#myInput:focus {
outline:none;
text-align: center;
}
header label {
display:block;
text-align: center;
}
header strong {
box-sizing: border-box;
display: block;
padding: 15px 8px;
margin-bottom: 15px;
background: white;
width: 100%;
text-align: center;
}
main>div>div,
header div {
padding: 15px 18px;
background: white;
margin-bottom: 65px;
}
main>div>div {
margin: 25px 0;
padding: 15px 8px;
}
main>div>div>strong {
display: inline-block;
text-align:center;
}
output {
display: inline-block;
float: right;
text-align: right;
min-width: 10em;
}
output::before {
content: '£';
}
output::after {
clear: both;
content: '';
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<body>
<main>
<header>
<a href="https://www.ineedawheelchair.co.uk/"target="_blank"><img src="../Documents/RMS Logo - Oval.png" width="300" height="175" align="centre"></a>
<label>
<strong>Enter NHS Price Below</strong>
<div>
<input id="myInput"/>
</div>
</label>
</header>
<div>
<div>
<strong>Retail:</strong>
<output id="output1" />
</div>
<div>
<strong>Schools & CDC's:</strong>
<output id="output2" />
</div>
<div>
<strong>Trade - Band A:</strong>
<output id="output3" />
</div>
<div>
<strong>Trade - Band B:</strong>
<output id="output4" />
</div>
<div>
<strong>Trade - Band C:</strong>
<output id="output5" />
</div>
<div>
<strong>Trade - Band D:</strong>
<output id="output6" />
</div>
</div>
</main>
<script type="text/javascript">
function byId(id) {
return document.getElementById(id)
}
window.addEventListener('load', onLoaded, false);
function onLoaded(evt) {
let input = byId('myInput');
input.addEventListener('input', onInputReceived, false);
}
function onInputReceived(evt) {
let outputs = [byId('output1'), byId('output2'), byId('output3'), byId('output4'), byId('output5'), byId('output6')];
let value = parseFloat(this.value);
if (!isNaN(value)) {
outputs[0].textContent = Math.ceil(value / 0.7);
outputs[1].textContent = Math.ceil(value * 1);
outputs[2].textContent = Math.ceil(value / 0.7 - (value / 0.7 / 100 * 40));
outputs[3].textContent = Math.ceil(value * 1);
outputs[4].textContent = Math.ceil(value / 0.7 - (value / 0.7 / 100 * 20));
outputs[5].textContent = Math.ceil(value / 0.7 - (value / 0.7 / 100 * 10));
} else {
outputs[0].textContent =
outputs[1].textContent =
outputs[2].textContent =
outputs[3].textContent =
outputs[4].textContent =
outputs[5].textContent = "*Please Enter a Number*";
}
}
</script>
</body>
</html>
我尝试将它对齐到“顶部”，但我找不到任何使它出现在上方的东西，我将这个图像移动到上方的最佳和最简单的方法是什么？
【问题讨论】：
-
为什么在body标签外面加了img标签？
-
@MetropolisCZ 全屏时编辑没有改变，它仍然出现在侧面，有什么原因吗？
-
我们可以运行的代码是sn-p。它比纯代码更好。 stackoverflow.com/help/minimal-reproducible-example
标签： javascript html css image