Как я могу повторить этот макет HTML - PullRequest
0 голосов
/ 31 марта 2020

This is what i need mine to look like

Итак, я пытаюсь воспроизвести это изображение выше, но немного борюсь. Может ли кто-нибудь дать мне несколько советов о том, как туда добраться. Я борюсь с интервалом в основном с текстовыми вводами и текстом слева от входных данных. Я близок к копированию изображения, но мне нужна помощь с разнесением всех различных элементов. Это моя попытка, и вот что я использовал: HTML 1006

li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;padding-top: 10px;
padding-bottom: 100px;
width: 800px;
background : #ececec;
border: 1px solid silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
background-color: #aa0000
}
.rq {
color: #FF0000;
font-size: 10pt;
}


p1
{
	float:left;
}

p2
{
	float:left;	
}

p3
{
	float:left;
}

.mail.btn
{
	width: 100%;
    margin-top: 3px;
    font-size: 24px;
    background-color: #2ec4a5;
    color: white;
}

img{
	display: block;
  margin-left: auto;
  margin-right: auto;
}

.b
{
	border-bottom: 1px solid black; 
}

#inputBtn{
	background-color: #b00404;
	color: white;
}

.a{
  margin-top: 50;
  margin-bottom: 50px;
  margin-right: 75px;
  margin-left: 100px;
}

.c{

}
image

Here is what mine looks like so far

1 Ответ

2 голосов
/ 31 марта 2020

Вы можете попробовать эту bootstrap сетку

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="col-sm-2">Card Number</div>
   <div class="col-sm-3"><input type='text' name='CardNumber' /></div>
  </div>
  <div class="row">
   <div class="col-sm-2">Expiration Date</div>
   <div class="col-sm-1">
   <select id="Month">
    <option disabled selected>Month</option>
    <option value="January">January</option>
    <option value="February">February</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
   </select>
    </div>
    <div class="col-sm-1">
    <select id="Year" style="margin-left:10px">
    <option disabled selected>Year</option> 
     <option value="2020">2020</option>
     <option value="2021">2021</option>
     <option value="2022">2022</option>
     <option value="2023">2023</option>
     <option value="2024">2024</option>
     <option value="2025">2025</option>
     <option value="2026">2026</option>
     <option value="2027">2027</option>
     <option value="2028">2028</option>
     <option value="2029">2029</option>
     <option value="2030">2030</option>
    </select>
   </div>
</div>
<div class="row">
  <div class="col-sm-2">Security Code</div>
  <div class="col-sm-2"><input type='text' name='text2' /></div>
</div>
</div>
</body>
</html>

, который готов начать ваш дизайн

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...