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

Question

我看到很多有关此论点的问题，但我还不能解决我的问题。 我有3个元素，我想将它们对齐在同一行。

这是我的HTML代码：

 <div>
      <a class="sxprova" href="javascript:scroll_modules(-1);">&lt;</a>

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

      <a class="dxprova" href="javascript:scroll_modules(1);">&gt;</a>
 </div>

这是我的CSS代码：

 .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);
 }


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

使用此代码，结果大致如下：

[要素] [第二要素________________________________________________] _________________________________________________________________ [第三要素]

我想要的是这样的：

[要素] [第二要素________________________________] [第三要素]

有人能帮我吗？

Answer 1

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

ul也应该悬空。

Answer 2

请参考以下演示将3个元素对齐在同一行上。 在Jsfiddle上正常工作，请在浏览器上尝试一下。

在同一行上对齐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;
}

Answer 3

您可以将项目包装在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;
}

Answer 4

终于我找到了解决方案。.我不得不对@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;
        }

我在容器中添加背景色以填充栏直到最后。

Answer 5

<div class="item-list">
      <a class="sxprova" href="javascript:scroll_modules(-1);">&lt;</a>

      <ul class="nav" id="ModuleContainer" runat="server" style="height:51px;width:85%;float:left;margin:0 5px;">
              <li>1</li>
              <li>2</li>
              <li>3</li>
      </ul>

      <a class="dxprova" href="javascript:scroll_modules(1);">&gt;</a>
 </div>

这是您要寻找的- 演示