I am struggling to align my buttons properly in the display. Even when I use float: right;, nothing seems to change. Take a look at the screenshot below:https://i.sstatic.net/4eIGj.png
My goal is to have these buttons neatly lined up vertically in a single row. I attempted using a table, but it messed up the design of my hyperlinks. Here's a snippet of my HTML:
<div class="LineField">
<p>Axo 800</p>
<a href="Planning.php?id=1" class="LineButton">Planning</a>
<a href="DataAnalyse.php?id=1" class="LineButton">Data analyse</a>
</div>
<div class="LineField">
<p>JC-FSX</p>
<a href="Planning.php?id=2" class="LineButton">Planning</a>
<a href="DataAnalyse.php?id=2" class="LineButton">Data analyse</a>
</div>
We can continue like this.
CSS:
.LineField
{
width: 50%;
height: 8%;
margin-bottom: 15px;
padding-top: 5px;
margin-left: auto;
margin-right: auto;
background: #191748;
border: 0.1em #191748;
border-radius: 1em;
color: white;
/* vertical alignment */
display: flex;
align-items:center;
}
.LineField p
{
margin-left: 25px;
margin-right: 25px;
Font-size: 200%;
}
.LineButton
{
border-radius: 0.5em;
width: 30%;
height: 50%;
background: linear-gradient(#ffffff, #c4c4ff);
margin-left: 3%;
margin-right: 3%;
padding-top: 5px;
color: #191748;
font-size: 150%;
font-weight: 500;
text-decoration: none;
}