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

С помощью этого кода результат составляет примерно следующее:

[FIRSTELEMENT] [ВТОРОЙ ELEMENT ________________________________________________] _________________________________________________________________ [ТРЕТИЙ ЭЛЕМЕНТ]

То, что я хочу что-то вроде этого:

[FIRSTELEMENT] [ВТОРОЙ ЭЛЕМЕНТ ________________________________] [ТРЕТИЙ ЭЛЕМЕНТ]

Может кто-нибудь мне помочь?

Answer 1

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

ul также следует оставить плавали.

Answer 2

Вы можете обернуть ваши предметы в div и поплавать двумя из них слева, а последний справа. Это очень неопределенный вопрос, так как вы не предоставляете много информации о своей проблеме. Надеюсь, это решит вашу проблему.

Заканчивать этот fiddle

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 3

Пожалуйста, обратитесь следующее демо выравнивать 3 элемента на одной и той же линии. Правильно работайте над Jsfiddle, попробуйте это в своем браузере.

Align 3 element on the same line

Что изменилось:

1. Добавлен ваш HTML внутри DIV элемента.

<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 4

Наконец я нашел решение .. Я должен сказать спасибо @Parasmani Батра и 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> 

Это вы ищете - DEMO