在动态宽度侧边栏中将项目保持在同一行

Question

我正在尝试为网页创建侧边栏。现在我希望侧边栏可以通过动画折叠，但我找不到在折叠时将<img> 和<span> 保持在同一行的方法，因为两个标签的宽度都超过了侧边栏的宽度。

我尝试了所有我能想到的东西，和float、display、overflow等一起玩。

这里有一个快速的JSFiddle 给你一个想法。

function toggleSidebar() {
  $('#sidebar, #mainContent').toggleClass('expanded');
  $('#sidebar, #mainContent').toggleClass('collapsed');

  if ($("#sidebar").hasClass("collapsed"))
    $("#toggler a").html(">>");
  else
    $("#toggler a").html("<<");
}

#mainContent {
  background-color: #0f0;
}

#sidebar {
  background-color: #00f;
}

img {
  vertical-align: middle;
}

.nav>li>a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

ul.nav-sidebar {
  width: 100%;
  padding: 0px;
}

#toggler a {
  float: right;
}

ul.nav-sidebar {
  width: 100%;
}

ul.nav-sidebar li {
  width: 100%;
  display: inline-block;
}

ul.nav-sidebar li,
ul.nav-sidebar li a {
  color: white;
  font-weight: bold;
}

.ar-icon {
  width: 50px;
}

#sidebar ul li span {
  padding-left: 10px;
}

#sidebar.collapsed ul li span {
  /*display: none;*/
}

#mainContent,
#sidebar {
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

#sidebar,
#mainContent {
  float: left;
  height: 100%;
}

#mainContent.expanded {
  width: calc(100% - 80px);
}

#mainContent.collapsed {
  width: calc(100% - 200px);
}

#sidebar.expanded {
  width: 200px;
}

#sidebar.collapsed {
  width: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 100%; height: 100%;">
  <div class="expanded" id="sidebar">
    <ul class="nav nav-sidebar">
      <li id="toggler" onclick="toggleSidebar();"><a>&lt;&lt;</a></li>
      <li><a href="#"><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>LongLongLong</span></a></li>
      <li><a href="#"><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>Short</span></a></li>
    </ul>
  </div>
  <div class="collapsed" id="mainContent">Dummy content</div>
</div>

Answer 1

Flexbox 可以很简单地做到这一点：

ul.nav-sidebar li a {
  display: flex;
  align-items: center;
}

jsFiddle

function toggleSidebar() {
  $('#sidebar, #mainContent').toggleClass('expanded');
  $('#sidebar, #mainContent').toggleClass('collapsed');

  if ($("#sidebar").hasClass("collapsed"))
    $("#toggler a").html(">>");
  else
    $("#toggler a").html("<<");
}

#mainContent {
  background-color: #0f0;
}

#sidebar {
  background-color: #00f;
}

img {
  vertical-align: middle;
}

.nav>li>a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

ul.nav-sidebar {
  width: 100%;
  padding: 0px;
}

#toggler a {
  float: right;
}

ul.nav-sidebar {
  width: 100%;
}

ul.nav-sidebar li {
  width: 100%;
  display: inline-block;
}

ul.nav-sidebar li,
ul.nav-sidebar li a {
  color: white;
  font-weight: bold;
}

.ar-icon {
  width: 50px;
}

#sidebar ul li span {
  padding-left: 10px;
}

#sidebar.collapsed ul li span {
  /*display: none;*/
}

#mainContent,
#sidebar {
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

#sidebar,
#mainContent {
  float: left;
  height: 100%;
}

#mainContent.expanded {
  width: calc(100% - 80px);
}

#mainContent.collapsed {
  width: calc(100% - 200px);
}

#sidebar.expanded {
  width: 200px;
}

#sidebar.collapsed {
  width: 80px;
}

ul.nav-sidebar li a {
  display: flex;
  align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 100%; height: 100%;">
  <div class="expanded" id="sidebar">
    <ul class="nav nav-sidebar">
      <li id="toggler" onclick="toggleSidebar();"><a>&lt;&lt;</a></li>
      <li><a href="#"><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>LongLongLong</span></a></li>
      <li><a href="#"><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>Short</span></a></li>
    </ul>
  </div>
  <div class="collapsed" id="mainContent">Dummy content</div>
</div>

Answer 2

你可以做这样的事情（更改评论）：

function toggleSidebar() {
  $('#sidebar, #mainContent').toggleClass('expanded');
  $('#sidebar, #mainContent').toggleClass('collapsed');

  if ($("#sidebar").hasClass("collapsed"))
    $("#toggler").html(">>"); /* modified */
  else
    $("#toggler").html("<<"); /* modified */
}

#mainContent {
  background-color: #0f0;
}

#sidebar {
  overflow: hidden; /* added */
  background-color: #00f;
}

img {
  vertical-align: middle;
}

.nav>li>a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

ul.nav-sidebar {
  width: 200px; /* modified; needs to match the width of the #sidebar.expanded */
  padding: 0px;
}

#toggler { /* modified */
  /* added */
  color: white;
  font-weight: bold;
  display: block;
  padding: 10px 15px;
  text-align: right; /* instead of "float: right" */
}

/* addition */
#toggler:hover {
  cursor: pointer;
}

ul.nav-sidebar li {
  width: 100%;
  display: inline-block;
}

ul.nav-sidebar li,
ul.nav-sidebar li a {
  color: white;
  font-weight: bold;
}

.ar-icon {
  width: 50px;
}

#sidebar ul li span {
  padding-left: 10px;
}

#sidebar.collapsed ul li span {
  /*display: none;*/
}

#mainContent,
#sidebar {
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

#sidebar,
#mainContent {
  float: left;
  height: 100%;
}

#mainContent.expanded {
  width: calc(100% - 80px);
}

#mainContent.collapsed {
  width: calc(100% - 200px);
}

#sidebar.expanded {
  width: 200px;
}

#sidebar.collapsed {
  width: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 100%; height: 100%;">
  <div class="expanded" id="sidebar">
    <a id="toggler" onclick="toggleSidebar();">&lt;&lt;</a> <!-- moved outside -->
    <ul class="nav nav-sidebar">
      <li><a href="#"><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>LongLongLong</span></a></li>
      <li><a href="#"><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>Short</span></a></li>
    </ul>
  </div>
  <div class="collapsed" id="mainContent">Dummy content</div>
  <div class="collapsed" id="mainContent">Dummy content</div>
  <div class="collapsed" id="mainContent">Dummy content</div>
  <div class="collapsed" id="mainContent">Dummy content</div>
  <div class="collapsed" id="mainContent">Dummy content</div>
  <!-- a few extra divs, just to see the overflow in action -->
</div>

Answer 3

只需向要保持内联的导航项添加一个类并为其设置最小宽度。我添加了“nav-item”类，然后将“#sidebar”溢出设置为隐藏；

HTML：

<div style="width: 100%; height: 100%;">
    <div class="expanded" id="sidebar">
        <ul class="nav nav-sidebar">
            <li id="toggler" onclick="toggleSidebar();"><a>&lt;&lt;</a></li>
            <li class="nav-item"> //new class
                <a href="#"><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>LongLongLong</span></a>
            </li>
            <li class="nav-item"> //new class
                <a href="#"><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>Short</span></a>
            </li>
        </ul>
    </div>
    <div class="collapsed" id="mainContent">Dummy content</div>
</div>

CSS

#sidebar {
    overflow: hidden;
}
.nav-item {
    min-width: 250px; /* This can be as big as small as you need */
}

Answer 4

您需要为列表元素使用绝对大小以使其与overflow 一起使用，否则当您折叠侧边栏时，列表元素也会自动更改其大小，从而导致换行。

试试这个：

ul.nav-sidebar li:not(:first-child) {
    width: 200px;
    overflow:hidden;
    display: inline-block;
}

您为侧边栏分配固定大小，因此您可以对列表元素执行此操作，也可以使用 overflow:hidden 引导您想要的行为（如果我做对了您想要完成的事情）。

这里有一个小提琴：https://jsfiddle.net/h0ey6bm5/19/