如何通过使用div中的所有空格来对齐多个按钮？ [英] How do I align multiple buttons by using all the space in a div?

问题描述

我想在div中放置多个按钮，这样它们就可以使用div的所有空间并且间距也相等。我想在另一个div中为文本实现。

用户界面是：

I want to place multiple buttons in a div so that they use all the space of the div and be equally spaced as well.Same thing I want to implement for text in another div as well.
The UI is:

<asp:Content ID="Content5" ContentPlaceHolderID="CPH4" runat="server">
    <div id="divHeading" class="font2" style="background-color: white; margin-left: auto"> &nbsp; Main Operating Centers
    </div>
    <div style="background-color: white;"><br /></div>
    <div id="divOptions" style="flex-item-align: center; background-color: white; ">
        &nbsp;
        <telerik:RadButton ID="RadButton1" runat="server" Text="Roma"></telerik:RadButton> &nbsp;
        <telerik:RadButton ID="RadButton2" runat="server" Text="Paris"></telerik:RadButton> &nbsp;
        <telerik:RadButton ID="RadButton3" runat="server" Text="Kualalampur"></telerik:RadButton> &nbsp;
        <telerik:RadButton ID="RadButton4" runat="server" Text="Chennai"></telerik:RadButton> &nbsp;
        <telerik:RadButton ID="RadButton5" runat="server" Text="Abu Dhabi"></telerik:RadButton> &nbsp;
        <telerik:RadButton ID="RadButton6" runat="server" Text="Houston"></telerik:RadButton>
    </div>
    <div style="background-color: white;"><br /></div>
</asp:Content>

css是：

The css is:

.font2 
{
    font-family :Calibri;
    font-size :medium;
    font-weight :bold;
    overflow: visible;
    border-color:gainsboro;
}

请建议如何实现这一点。

Please suggest how to achieve this.

推荐答案

我认为，你可以使用百分比宽度（而不是固定宽度）对于每个div。例如：假设div中有4个按钮。因此，每个div（包含按钮）宽度将为25％。

I think, you can use percentage width (instead of fixed width) for each of the div. For example: say there will be 4 buttons in a div. so, each of the div (which contains the button) width will be 25%.

<style type="text/css">
.div-parent
{
width:100%;
}
.div-button
{
float:left;
width:25%;
}
.div-button button
{
width: 100px;
}
</style>

html将是：

The html will be:

<div class="div-parent">
    <div class="div-button">
        <input type="button" value="Button 1" />
    </div>
    <div class="div-button">
        <input type="button" value="Button 2" />
    </div>
    <div class="div-button">
        <input type="button" value="Button 3" />
    </div>
    <div class="div-button">
        <input type="button" value="Button 4" />
    </div>
</div>

希望有所帮助

Hope it helps

这篇关于如何通过使用div中的所有空格来对齐多个按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！