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

Question

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

我尝试过的所有内容都超出了我的想象，使用了float，display，overflow等等。

这是一个快速JSFiddle给你一个想法。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

Flexbox可以做到这一点：

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

<强> jsFiddle

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需在要保持内联的导航项中添加一个类，并为它们设置最小宽度。我添加了类“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 3

您可以执行以下操作（已更改注释）：

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 4

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

试试这个：

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

您为侧边栏指定了固定大小，因此您可以对列表元素执行此操作，并使用overflow:hidden执行所需行为（如果我正确完成了您想要完成的操作）。

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