HTML и CSS центрирование и применение пространства - PullRequest
Новая
       4

HTML и CSS центрирование и применение пространства

1 голос
/ 21 марта 2019

У меня есть этот код 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 совсем недавно, все это для меня ново, но очень интересно!

Спасибо

Ответы [ 2 ]

0 голосов
/ 21 марта 2019

Вот обновленная скрипка: 

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;
}

.textbox {
  border-color: dodgerblue;
  box-shadow: 0 0 8px 0 blue;
}

.form {
    padding-bottom: 10px;
    display: block;
}

body {
  background-color: #fff;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
</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>
0 голосов
/ 21 марта 2019

Кроме того, как я могу выровнять текст над каждым текстовым полем вместо того, чтобы быть слева?

Сделать оболочки каждого раздела внутри container1 a столбец flexbox и добавьте align-items: center, чтобы выровнять его по горизонтали.Также добавьте margin к textbox - см. Демонстрацию ниже: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...