I am struggling to figure out how to turn this into a horizontal list where all the elements have equal width.
If there is any missing information, please let me know by commenting or messaging. All the CSS that is not within the "grid" <li> is for a navbar.
body{
margin: 0;
font-family: Verdana, sans-serif;
}
.intro{
margin-left: 5%;
margin-right: 5%;
text-align: center;
font-family: Verdana, sans-serif;
}
.active {
background-color: red;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: right;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
background-color: #D3D3D3
}
.button {
background-color: white;
color: black;
border: 2px solid #555555;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
}
.button:hover {
background-color: #555555;
color: white;
}
li.grid {
float: left;
width: 25%;
}
<ul>
<li class="grid">
<form action="http://google.com">
<button class="button" type="submit">
Computers, printers, mobile phones, and the widgets that accompany them account for the emission of about two per cent of the estimated total of emissions from human activity. That is the same as the aviation industry's contribution. Twenty-five per cent of the emissions in question are generated by the manufacture of computers. The rest comes from their use.
<br>
<br>
</button>
</form>
</li>
<li class="grid">
<form action="http://google.com" style="float: left">
<button class="button" type="submit">
Computers can be used to reduce emissions produced by other industries, up to 7.8 billion tonnes by 2020, or five times ICT's footprint. Computers can make industries more efficient and less wasteful of power and fuel.
</button>
</form>
</li>
<li class="grid">
<form action="http://google.com" style="float: left">
<button class="button" type="submit">
The use of computers has led to both positive and negative impacts on the climate change of our planet. Computers can help make some processes more efficient and save energy while the use and manufacture of computers contribute to the increased use of energy leading to global warming. This website helps you look at the positives and negatives of computing and climate change.</p>
</button>
</form>
</li>
<li class="grid">
<form action="http://google.com" style="float: left">
<button class="button" type="submit">
There are many ways in which computers can help cut down on our use of energy. Computers are steadily improving the amount of energy they use, with smaller computers producing less CO2 than larger desktop computers.
<br>
<br>
</button>
</form>
</li>
</ul>