html - 在另一个 div 的整个长度上均匀地划分 div

Question

我有:

如您所见，它的编号为 1-16。 (这列火车有 16 个车轴。)但是，您也可以向右滚动(因为它下面有文本字段。)但是当我向右滚动时:

您可以看到编号并未占整个可滚动 div 的 100%。我该怎么做才能使车轴 (nr 1/16) 从左到右均匀分布？黑匣子是火车。

代码:

<div id="center">
<?php
    //Train is send here//
    $add_train = $database->train_add();
?>
    Train: <?php echo $_POST['train_name']; ?>
    <!--Here we make the number of fields based on the number of axles-->
    <div id="axle_bogie_border">
    <!--The show axles are the number of checkboxes (Filled in by a user)-->
        <div id="show_axles">
        <table>
        <tr>
            <?php  
                $_POST['number_of_axles'];
                    if(isset($_POST['number_of_axles'])){
                    for($i=0; $i<$_POST['number_of_axles']; $i++){
                        echo "<td>" . "<div id='axle_figure'>" . $i . "</div>" . "</td>";
                    }   
                }
            ?>
            </tr>
            </table>
        </div>
        <br /> <br />
        <div id="show_bogies">
            <?php  
                $_POST['number_of_axles'];
                    if(isset($_POST['number_of_axles'])){
                    for($i=0; $i<$_POST['number_of_axles']; $i++){
                        echo "<input type='text' name='bogies[$i]'>";
                    }   
                }
            ?>
        </div>
    </div>
</div>

CSS:

#axle_bogie_border {
    background-image: url("../Images/add_train.png");
    background-repeat: repeat-x;
    background-position: top;
    background-size: 30%;
    border: 2px solid black;
    width: 98%;
    height: auto;
    overflow-x: scroll;
    overflow-y: scroll;
    white-space: nowrap;
    display: inline-block;
}

#axle_figure {
    display: inline-block;
    margin-top: 10%;
    width: 27px;
    height: 27px;
    background: orange;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

#show_axles table{
    margin-top: 11%;
    margin-left: auto;
    margin-right: auto;
}

#show_bogies {
    margin-left: auto;
    margin-right: auto;
}

Answer 1

我看到您将车轴渲染为 <td>的。如果你只是设置你的 <table>有 width: 100% , 它应该填满整个屏幕的宽度。

table{
    width: 100%;
}

JSFiddle demo

如果这不是您想要的，那我一定是误解了您的意思。如果是这样，请提供一些额外信息。