我这里有这段 HTML 和 CSS 代码:
.container1{
text-align: center;
margin-top: 200px;
font-size: 30px;
padding: 30px;
transform: perspective(1px) translateY(-50%);
}
.textbox{
width: 300px;
height: 50px;
font-size: 20px;
text-align: center;
}
.textbox{
border-color: dodgerblue;
box-shadow: 0 0 8px 0 blue;
}
body {
background-color: #fff;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript">
window.onload=function(){
function GetDays(){
var dropdt = new
Date(document.getElementById("drop_date").value).getTime();
var pickdt = new
Date(document.getElementById("pick_date").value).getTime();
return parseInt((dropdt- pickdt) / (24 * 3600 * 1000));
}
document.getElementById("drop_date").addEventListener("change",function(){
if(document.getElementById("drop_date").value){
document.getElementById("numdays2").value=GetDays();
}
})
document.getElementById("pick_date").value = new Date().toISOString().slice(0,10);
}
</script>
</head>
<body>
<div id="reserve_form" class="container1">
<div id="pickup_date"><p><label class="form">Todays Date:</label><input
type="date" class="textbox" id="pick_date" name="pickup_date" disabled
onchange="cal()"</p></div>
<div id="dropoff_date"><p><label class="form">Dropoff Date:</label><input
type="date" class="textbox" id="drop_date" name="dropoff_date" /></p></div>
<div id="numdays"><label class="form">Number of days:</label><input
type="text" class="textbox" id="numdays2" name="numdays"/></div>
</div>
</body>
</html>我如何在文本和文本框之间留出一点空间。我仍然需要它居中，但需要一些空间让阴影看起来不错。
另外，我怎样才能将文本对齐在每个文本框上方而不是在左侧？
我最近开始编写 HTML 和 CSS 代码，所有这些对我来说都是新的，但非常有趣!
谢谢
最佳答案
Also, how can I align the text above each text-box instead of being on the left?
将 container1 中每个部分的 wrappers 设为 column flexbox 并添加 align-items: center 到水平对齐。还要向 textbox 添加 margin - 请参见下面的演示:
window.onload = function() {
function GetDays() {
var dropdt = new
Date(document.getElementById("drop_date").value).getTime();
var pickdt = new
Date(document.getElementById("pick_date").value).getTime();
return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}
document.getElementById("drop_date").addEventListener("change", function() {
if (document.getElementById("drop_date").value) {
document.getElementById("numdays2").value = GetDays();
}
})
document.getElementById("pick_date").value = new Date().toISOString().slice(0, 10);
}.container1 {
text-align: center;
margin-top: 200px;
font-size: 30px;
padding: 30px;
transform: perspective(1px) translateY(-50%);
}
.textbox {
width: 300px;
height: 50px;
font-size: 20px;
text-align: center;
border-color: dodgerblue;
box-shadow: 0 0 8px 0 blue;
margin: 10px; /*added */
}
#pickup_date p, #dropoff_date p, #numdays { /* added */
display: flex;
flex-direction: column;
align-items: center;
}
body {
background-color: #fff;
}<div id="reserve_form" class="container1">
<div id="pickup_date">
<p><label class="form">Todays Date:</label><input type="date" class="textbox" id="pick_date" name="pickup_date" disabled onchange="cal()"/> </p></div>
<div id="dropoff_date">
<p><label class="form">Dropoff Date:</label><input type="date" class="textbox" id="drop_date" name="dropoff_date" /></p>
</div>
<div id="numdays"><label class="form">Number of days:</label><input type="text" class="textbox" id="numdays2" name="numdays" /></div>
</div>关于HTML 和 CSS 居中和应用空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55278257/