将div除以另一个div的整个长度

Question

我有：

正如您所看到的那样，它的编号从1到16。 （这列火车有16根车轴。） 但是，您也可以向右滚动（因为它下面的文本字段。） 但是当我向右滚动时：

你可以看到编号不占整个scrolable 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

如果这不是你想要的，我一定误解了你想要的东西。如果是这样，请提供一些额外的信息。