Як я магу зрабіць спіс уль таго ж памеру, што і ўваходны элемент па шырыні?

У мяне ёсць кантэйнер, які мае дзве нерухомыя элементы памеру, і адзін элемент вадкасці памеру. Калі браўзэр змяняецца, элемент вадкасці прымае пакінуты памер акна, а два іншых застаюцца нерухомымі. Праблема заключаецца ў тым, у мяне ёсць мкл, які ўстаўляецца пасля уваходнага элемента ў кантэйнеры. Як я магу зрабіць спіс уль быць памерам уваходнага элемента па шырыні?

jsfiddle: http://jsfiddle.net/vR7E8/

код:

<div class="wrap">
  <div class="left">
  </div>

  <div class="middle">
    <input class="my_input" />
    
  • list one
  • two
  • three
  • four
  </div>

  <div class="right">
  </div>
</div>

CSS:

.wrap
{
    display: block;
     width: 100%;
     height: 100px;
     background: yellow;
     padding-left: 40px;
     padding-right: 50px;
     position: relative;
}

   .left
   {
      display: inline;
       width: 30px;
       height: 100px;
       background: blue;
   }

     input.my_input
     {

        width: 100%;
        height: 100px;
        display:inline-block;
       }

      .right
      {
        display: inline;
        background: green;
        width: 40px;
        height: 100px;
      }

     .my_list
     {
      list-style: none;
       padding: 0;
       margin: 0;
       position: absolute;
        width: 100%;
       border: 1px solid black;
        }

Дарэчы уль спіс павінен быць абсалютна пазіцыянаваны, таму што я не хачу, каб перамясціць змесціва ніжэй яго.

Акрамя таго, яго ўстаноўка шырыні спісу да памеру з бацькоў, таму я паспрабаваў дадаць абгортку ў сну кантэйнер «сярэдняга», але не працаваў.

<�Моцны> UPDATE:

Добра, я атрымаў яго на працу, я проста павінен быў зрабіць кантэйнер і ўсталяваць гэты кантэйнер ў становішча: адносны.

0

7 адказы

Вы можаце дадаць гэта да вашай сярэдняй частцы?

.middle {
    position: relative;
    width: 200px;

}

Усталяваўшы шырыню ў любым% ці пікселяў, і ўстаноўку кантэйнера ў адноснае становішча, вы даць абодвум элементам адзін і тую ж бацькоўскую базу па памеры ад.

1
дададзена
Гэта не патрабуе выдалення абсалютная пазіцыянаванне ў спісе: jsfiddle.net/vR7E8/5
дададзена аўтар cimmanon, крыніца
прабачце я забыўся згадаць, што мне трэба абсалютная становішча, таму што я не хачу, каб перамясціць змесціва ніжэй яго. спіс з'яўляецца дынамічным і паказана з дапамогай JQuery.
дададзена аўтар Masu, крыніца
І так, то як braican згадвалася, гэта адбываецца таму, што вы ўсталявалі на Улі абсалютная становішча.
дададзена аўтар Rob R, крыніца
Дапамагла Ці гэтая праца для вас? Калі гэта так, вы можаце пазначыць яго як адказаў, калі ласка? Дзякуючы.
дададзена аўтар Rob R, крыніца

Вы можаце дадаць гэта да вашай сярэдняй частцы?

.middle {
    position: relative;
    width: 200px;

}

Усталяваўшы шырыню ў любым% ці пікселяў, і ўстаноўку кантэйнера ў адноснае становішча, вы даць абодвум элементам адзін і тую ж бацькоўскую базу па памеры ад.

1
дададзена
Гэта не патрабуе выдалення абсалютная пазіцыянаванне ў спісе: jsfiddle.net/vR7E8/5
дададзена аўтар cimmanon, крыніца
прабачце я забыўся згадаць, што мне трэба абсалютная становішча, таму што я не хачу, каб перамясціць змесціва ніжэй яго. спіс з'яўляецца дынамічным і паказана з дапамогай JQuery.
дададзена аўтар Masu, крыніца
І так, то як braican згадвалася, гэта адбываецца таму, што вы ўсталявалі на Улі абсалютная становішча.
дададзена аўтар Rob R, крыніца
Дапамагла Ці гэтая праца для вас? Калі гэта так, вы можаце пазначыць яго як адказаў, калі ласка? Дзякуючы.
дададзена аўтар Rob R, крыніца

Вы можаце дадаць гэта да вашай сярэдняй частцы?

.middle {
    position: relative;
    width: 200px;

}

Усталяваўшы шырыню ў любым% ці пікселяў, і ўстаноўку кантэйнера ў адноснае становішча, вы даць абодвум элементам адзін і тую ж бацькоўскую базу па памеры ад.

1
дададзена
Гэта не патрабуе выдалення абсалютная пазіцыянаванне ў спісе: jsfiddle.net/vR7E8/5
дададзена аўтар cimmanon, крыніца
прабачце я забыўся згадаць, што мне трэба абсалютная становішча, таму што я не хачу, каб перамясціць змесціва ніжэй яго. спіс з'яўляецца дынамічным і паказана з дапамогай JQuery.
дададзена аўтар Masu, крыніца
І так, то як braican згадвалася, гэта адбываецца таму, што вы ўсталявалі на Улі абсалютная становішча.
дададзена аўтар Rob R, крыніца
Дапамагла Ці гэтая праца для вас? Калі гэта так, вы можаце пазначыць яго як адказаў, калі ласка? Дзякуючы.
дададзена аўтар Rob R, крыніца

Зразумеў, проста стварыць элемент кантэйнера Абкручванні DIV, якое змяшчае ўваходныя і складнікі спісаў, а таксама ўсталяваць, што абгортку ў становішча: адносная.

0
дададзена

remove the position:absolute from the

    element. Absolute positioning takes the element out of the normal flow, and won't automatically fit to the width of the parent element.

    Alternatively you could set a fixed width for both the <input> and the

0
дададзена

remove the position:absolute from the

    element. Absolute positioning takes the element out of the normal flow, and won't automatically fit to the width of the parent element.

    Alternatively you could set a fixed width for both the <input> and the

0
дададзена

remove the position:absolute from the

    element. Absolute positioning takes the element out of the normal flow, and won't automatically fit to the width of the parent element.

    Alternatively you could set a fixed width for both the <input> and the

0
дададзена