对齐html / css

Question

我试图让我的按钮在显示屏上对齐。如果我尝试使用float: right;没有任何事情发生。您可以在下方找到屏幕截图：

所以我试图将这些按钮连在一起。 我也尝试过使用一张桌子，但那个用来搞砸了我的hrefs设计 在这里你可以找到我的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>

等。等

的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;      
        }

Answer 1

您可以设置p元素的宽度，如下所示

    .LineField p
    {
        margin-left: 25px;
        margin-right: 25px;
        Font-size: 200%;
        width: 130px;
    }

更新了Code Here

Answer 2

只需使用下面的CSS：

.LineField p {
   margin-left: 25px;
   margin-right: 25px;
   Font-size: 200%;

   float: left;
   width: 16%;
}

Answer 3

您可以设置LineButton类的宽度，如下所示

 .LineButton
    {
        border-radius: 0.5em;
        width:50%;
        height: 50%;
        background: linear-gradient(#ffffff, #c4c4ff);
        margin-left: 1%;
        margin-right: 1%;
        padding-top: 5px;
        padding-left: 5%;
        color: #191748;
        font-size: 150%;
        font-weight: 500;   
        text-decoration: none;      
    }

请参阅下面的更新代码

Sample Code