html - 在 html/css 中对齐按钮

Question

我试图让我的按钮在我的显示中对齐。如果我尝试使用 float: right; 没有任何反应。您可以在下面找到屏幕截图:

所以我试图让这些按钮在彼此下方排成一排。我也尝试过使用一张 table ，但是那把我的 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