I have attached the HTML and CSS I have so far but I am new to front end so I'm not sure what the best approach is.
I just want each text element to be aligned with the respective numbers underneath them.
h1 {
font-family: 'Biryani', sans-serif;
font-size: 20px;
font-weight: bold;
text-align: center;
padding: 50px;
}
ul {
text-align: justify;
}
ul:after {
content: '';
display: inline-block;
width: 100%;
}
ul:before {
content: '';
display: block;
margin-top: 0em;
}
li1 {
font-family: 'Biryani', sans-serif;
font-size: 14px;
font-weight: light;
color: #929292;
display: inline-block;
margin-left: 10em;
margin-right: 13em;
position: relative;
top: 1.25em;
}
li2 {
font-family: 'Biryani', sans-serif;
font-size: 16px;
font-weight: light;
color: #929292;
display: inline-block;
margin-left: 10em;
margin-right: 13em;
position: relative;
top: 1.25em;
}
<!DOCTYPE HTML>
<html>
<head>
<title> REALSURF</title>
<link rel="stylesheet" type="text/css" href="realsurfcss.css">
<link href="http://ift.tt/2fflJ3P" rel="stylesheet">
</head>
<body>
<h1>
REALSURF
</h1>
<ul>
<li1>Wind</li1>
<li1>Wave Height</li1>
<li1>Tide</li1>
</ul>
<ul>
<li2>6</li2>
<li2>3-4</li2>
<li2>1.8^</li2>
</ul>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire