HTML如何在同一行对齐3个元素

<ul class="nav" id="ModuleContainer" runat="server" style="margin-right:20px; float:left">

ul也应该保持浮动。

请参阅下面的演示，在同一行对齐3个元素。在Jsfidle上正常工作请在浏览器上尝试此操作。

将上的3个元素对齐

我改变了什么：

1.在DIV元素中添加html。

<div id="dvContainer" class="container"> 
     ... Yout HTML Goes Here
</div>

2.在CSS中所做的更改

.container {
    width: 100%;
    position: relative;
    display: inline-block;
}
.sxprova {
    /*float:left;*/ -- Comment this out and add following
    position: absolute;
    left: 0;
    top: 0;
}
.dxprova {
    /*float:right;*/ -- Comment this out and add following
    position: absolute;
    right: 0;
    top: 0;
}
ul {
    margin-right: 20px;
    float: initial;
}
ul li {
    display: inline-block;
    /*width: 20px;
    border: 1px solid #fff;*/ -- Comment this out not required
    text-align: center;
    padding: 20px 0;
}

您可以将项目包装在div中，并将其中两个项目向左浮动，最后一个项目向右浮动。这是一个非常模糊的问题，因为你没有提供很多关于你的问题的信息。我希望这能解决你的问题。

看看这个小提琴

Html:

<div id="wrapper">
    <div class="item floatLeft"></div>
    <div class="item floatLeft"></div>
    <div class="item floatRight"></div>
</div>

CSS：

#wrapper {
    width: 100%;
}
.item {
    width: 200px;
    height: 200px;
    background-color: black;
    margin: 0 25px 0 0;
}
.floatLeft {
    float: left;
}
.floatRight {
    float: right;
}

终于找到了解决方案。。我必须感谢@Parasmani Batra和Suprabhat的建议。

 <div id="dvContainer" class="containerModule" style="background-color: rgb(223,223,223);">

                    <a class="sxprova" href="javascript:scroll_modules(-1);">&lt;</a>
                    <ul class="nav" id="ModuleContainer" runat="server" style="float:left">
                    </ul>
                    <a class="dxprova" href="javascript:scroll_modules(1);">&gt;</a>




        </div>

和css：

 .nav {
        font-family: 'Trebuchet MS', sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 13px;
        position: relative;
        margin: auto;
        background-color: rgb(223,223,223);
        width: 100%%;
        white-space: nowrap;
        overflow-x: hidden;
        padding-right: 20px;
    }

.containerModule {
        width: 100%;
        position: relative;
        display: inline-block;
    }
    .sxprova {
        float: left;
        padding: 17px 5px;
        z-index: 100;
        font-weight: bold;
        border-right: 1px solid #CCC;
        background-color: rgb(223,223,223);
    }
.dxprova {
        float: right;
        border-left: 1px solid #CCC;
        padding: 17px 5px;
        z-index: 100;
        font-weight: bold;
        background-color: rgb(223,223,223);
    }
ul {
        float: initial;
    }
        ul li {
            display: inline-block;
            border: 1px solid #fff;
            text-align: center;
        }

我在容器处添加背景色以填充条形图，直到最后。