Siema, rozkrzaczyły mi się elementy, podpowie ktoś co jest przyczyną?
Chciałem żeby elementy right i left przykrywały row czyli div z kolorkiem aqua.
Dziękuję.
<DOCTYPE HTML5>
<html>
<head>
<meta charset = "utf-8">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<h1 id = "title"> Survey Form </h1>
<main>
<p id="description"> Let us know something about yourself.</p>
<form id="survey-form">
<div class="row">
<div class="left">
<label class="left-text">lewa</label>
</div>
<div class="right">
<label class="right-text">prawa</label>
</div>
</div>
<!-- ************************name************************ -->
<div class="row">
<div class="left"><label class="left-text" id="name-label" for="name">* Name: </label> </div>
<div class="right">
<input class="right-text" type=name id ='input-name' placeholder="Enter your name" required></div>
</div>
<!-- ************************email************************ -->
<div class="row">
<div class="left"><label class="left-text" id="email-label" for="email">* Email: </label> </div>
<div class="right"> <input class="right-text" type=email id='email' placeholder="Enter your email" required></div>
</div>
<!-- ************************age************************ -->
<div class="row">
<div class="left"><label class="left-text" id="number-label" for="age">* Age: </label></div>
<div class="right"><input class="right-text" type=number id='input-number' min="16" max="100" placeholder="Enter your age" required></div> </div>
<!-- ************************feelings************************ -->
<div class="row" id="feelings-row">
<div class="left"><label for="currentPos" class ="left-text">How are you feeling today?: </label></div>
<div class="right">
<select class="right-text" id="dropdown" name = "currentPos">
<option disabled value>Wybierz opcję</option>
<option value = swietnie> Świetnie </option>
<option value = dobrze> Dobrze </option>
<option value = srednio> Średnio </option>
<option value = zle> Źle </option>
</select>
</div> </div>
<!-- ************************Do you like this page?************************ -->
<div class="row">
<div class="left"><label class="left-text">Do you like this page? </label> </div>
<div class="right"><input type=radio name="radio-buttons" value="1" class="right-radio"><label class="right-text">Definitely</label></div> </div>
<div class="row">
<div class="left">
<div class="left-text"> </div></div>
<div class="right"><input type=radio value="2" name="radio-buttons" class='right-radio'><label class="right-text">Maybe</label></div></div>
<div class="row">
<div class="left">
<div class="left-text"></div></div>
<div class="right"><input type=radio name="radio-buttons" value="3" class='right-radio'><label class="right-text">Not sure</label></div></div>
<!-- ************************What do you like?************************ -->
<div class="row"><div class=left><label class="left-text">
What do you like?</label> </div>
<div class="right">
<input type=checkbox class="right-radio" value=1><label class="right-text">Front-End</label></div>
</div><div class="row">
<div class=left><label>
</label> </div>
<div class="right">
<input type=checkbox class="right-radio" value=2><label class="right-text">Back-End</label></div>
</div>
<div class="row">
<div class=left><label>
</label> </div>
<div class="right">
<input type=checkbox class="right-radio" value=3><label class="right-text">Hardware</label></div>
</div>
<div class="row">
<div class=left><label>
</label> </div>
<div class="right">
<input type=checkbox class="right-radio" value=4><label class="right-text">Software</label></div>
</div>
<div class="comment"><label>Any Comments or Suggestions?
</label> </div>
<div class="textarea-comment">
<textarea id="user-comments" placeholder = "Enter your comment here..." ></textarea></div>
<button id=submit>Submit</button>
</form>
</main>
</body>
</html>
</body>
body { background-color: #a9d7d1;
font-family: 'Raleway', sans-serif;}
h1 {text-align:center;}
p {text-align:center;
font-weight:700;}
main {
background-color:white;
height: 900px;
width:750px;
margin:auto;
padding:50px;
border-radius:5px;
}
.
#submit {
margin-top:30px;
width:100px;
height:40px;
border-radius:5px;
background-color:#59ace0;
border: 0px solid;
color:#F7F7F7;
}
.row {
background-color:aqua;
color:white;
height:25px;
margin-bottom:15px;
}
.left{
background-color:red;
width: 373px;
height:25px;
display:inline-block;
text-align:right;
}
.left-text{
margin-right:25px;
font-size:17px;
vertical-align: middle;
}
.right{
background-color:green;
width:372px;
display:inline-block;
text-align:left;
height:25px;
}
.right-text{
margin-left: 15px;
font-size:17px;
vertical-align: middle;
}
#input-number{
width:215px;;
}
#feelings-row{
margin-top:50px;
}
.right-radio{
margin-left:15px;
height:12px;
vertical-align: middle;
}
.comment{
text-align:center;
margin-top:100px;
font-size:17px;
vertical-align: middle;
}
.textarea-comment{
text-align:center;
margin-top:25px;
}
#user-comments{
height:75px;
width:300px;
}
#submit{
width:90px;
height:25px;
margin:auto;
display:block;
margin-top:20px;
}
