If this is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav id="you">
<a href="#">Gmail</a>
<a href="#">Apps</a>
<a href="#">You</a>
<a href="#">Sign In</a>
</nav>
<form>
<img src="static/Google-logo-520x245.jpg" width="250" height="125" alt="Google Logo">
<br>
<input type="text" name="search">
<button id="left" name="Google">Google Search</button>
<button id="right" name="Feeling">Feeling Lucky</button>
</form>
</body>
</html>
Then why doesn't the justify-content: space-around option put space between my 2 buttons instead they overlay.
I am trying to keep the image, input field and buttons all aligned to the center vertically and each on their own row horizontally.
my css
#you {
position: fixed;
right: 5px;
height: 40px;
top: 0;
padding-top: 15px;
}
#you a {
text-decoration: none;
margin-right: 6px;
}
input {
width: 400px;
/*display: block; */
position: fixed;
top: 100%;
left: 50%;
border: 1px solid #999;
height: 25px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
form {
position: fixed;
top: 45%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*http://ift.tt/1AgeSbL */
}
button {
position: absolute;
top: 135%;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
Aucun commentaire:
Enregistrer un commentaire