当它的兄弟姐妹的宽度增加时，响应式设计可以缩小div(Responsive design to shrink a div when it's sibling's width inc

当它的兄弟姐妹的宽度增加时，响应式设计可以缩小div(Responsive design to shrink a div when it's sibling's width increases)

我试图修复一个网站的头部包含两个元素的错误，一个div浮动左边，一个ul浮动右边。

通常情况下，这两个坐在一起，但偶尔ul的内容很大，因为两个连接div保持在线上，但ul下降到下一行。 我想通过牺牲div上的宽度和两行上的文本来防止这种情况。

到目前为止，我所能做的最好的事情是在px中明确地设置左侧div的宽度，但是当它只是在需要时才会使所有内容都成为两行。 我已经尝试过的其他每件事都显示和最小/最大宽度并没有太大的影响。

我不会在这里发布完整的标记，但它有点像这样

<div id="minibasketAndLogin"> <div id="login"><!--omitted--></div> <ul class="basketLoginList"> <li><!--there are 7 li's in this list--></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </ul>

CSS也相当复杂，所以我不会在这里包含它，但整个事情可以在这个小提琴中找到。

基本上，随着ul延伸， div应该缩小，并且将文本换行到下一行。

谢谢

I am trying to fix a bug with a website where the header contains two elements, a div floated left and a ul floated right.

Normally, the two sit next to each other, but occasionally the content of the ul is large and as the two connect the div stays on the line but the ul drops to the next line. I want to prevent this by sacrificing width on the div and having the text on two lines.

The best I've been able to do so far is to set the width on the left div explicitly in px, but that makes everything two lines when it should only be when it needs to. Every other thing I've tried around display and min/max width hasn't had much affect.

I'll not post the full markup here but it goes a little something like this

<div id="minibasketAndLogin"> <div id="login"><!--omitted--></div> <ul class="basketLoginList"> <li><!--there are 7 li's in this list--></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </ul>

The css is also rather convoluted so I won't include it here, but the whole thing can be found in this fiddle.

Basically, as the ul stretches, the div should shrink and it's text wrap to the next line.

Thanks

最满意答案

我会这样做 - 将容器设置为table ，将两个元素设置为table-cell ，以便它们始终保持彼此相邻。 为了将列表项保存在一行中，请设置white-space:nowrap; 在ul ，并display:inline-block; 在li 。

的jsfiddle

#minibasketAndLogin {
    display: table;
    width: 100%;
}
#login, .basketLoginList {
    display: table-cell;
}
.basketLoginList {
    white-space: nowrap;
}
.basketLoginList li {
    display: inline-block;
    border: 1px solid;
} 
  
<div id="minibasketAndLogin">
    <div id="login">Login as John Doe</div>
    <ul class="basketLoginList">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7 bla bla bla bla bla bla bla bla bla bla</li>
    </ul>
</ul> 
  
 
I would do it like this - set the container as table and two elements inside as table-cell, so they will always stay next to each other. For keeping the list items on a single line, set white-space:nowrap; on the ul, and display:inline-block; on the li.
 
jsfiddle
 
 
 
  
  
#minibasketAndLogin {
    display: table;
    width: 100%;
}
#login, .basketLoginList {
    display: table-cell;
}
.basketLoginList {
    white-space: nowrap;
}
.basketLoginList li {
    display: inline-block;
    border: 1px solid;
} 
  
<div id="minibasketAndLogin">
    <div id="login">Login as John Doe</div>
    <ul class="basketLoginList">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7 bla bla bla bla bla bla bla bla bla bla</li>
    </ul>
</ul>