Question

我正在考虑创建一个固定的导航栏，它将位于我的应用程序的视图中。该栏将包含3个元素，后退按钮，导航下拉列表和可选按钮部分。这三个元素在左侧，中间和右侧与导航栏对齐。

这个想法是＆＃34;返回＆＃34;按钮实际上会列出上一节的内容，例如＆＃34;摘要＆＃34;或＆＃34;个人详细信息＆＃34;。因此，本文将根据前一部分进行扩展。导航按钮还将列出您所在的部分，与后退按钮的原理相同。但是这篇文章并没有真正关注导航或可选的按钮元素。

我已经链接了一个基本的plunker，它可以让您大致了解我在做什么。这个想法是当视口变得足够小（宽度低于215px）和＆＃34;返回＆＃34;和＆＃34;导航＆＃34;元素碰撞，后面按钮中包含的文本将被隐藏，只给你一个雪佛龙。目前你可以看到这种工作在CSS中，但是按钮仍然包含宽度，因为按钮的文字被推到了雪佛龙下面。如果根本没有文字，那么想法就是拥有人字形的宽度。没有特定的断点，因为文本将根据应用程序的每个部分而有所不同。

我想知道是否可以用CSS做到这一点？我知道使用JavaScript是可能的，但如果有CSS解决方案可用，我宁愿选择这条路线。如果没有CSS解决方案，那么JS必须成为前进的方向。

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="back-container">
        <button class="back">
          <span class="chevron"></span>
          <span class="text">Back</span>
        </button>
      </div>
      <div class="navigation-container">
        <div class="navigation-container-inner">
          <button class="navigation">Navigation</button>
        </div>
      </div>
      <div class="plus-container">
        <ul class="plus">+</ul>
      </div>
    </div>
  </body>

</html>

CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
}

.back-container {
  order: 0;
  flex: 1 1 auto;
  align-self: auto;
}

.navigation-container {
  order: 0;
  flex: 1 1 auto;
  align-self: auto;

  display: flex;
  justify-content: center;
  text-align: center;
}

.plus-container {
  order: 0;
  flex: 1 1 auto;
  align-self: auto;

  text-align: right;
}

button.back {
  height: 32px;
}

button.back .chevron,
.chevron {
  float: left;
  display: inline-block;
  height: 30px;
  width: 18px;
  background: url(http://games.thediamondjubilee.org/game_images/timeline/black-chevron-left.png);
  background-repeat: no-repeat;
}

button.back .text {
  display:inline-block;
  margin-left: 6px;
}

ul.plus {
  display:inline-block;
}

编辑：在提及媒体查询的人员中，这是一个可能在元素内的潜在文本的plunker。当现在将浏览器的大小调整为宽度为335px时，您可以看到后部元素和导航元素发生冲突。当文本消失时，后退按钮仍包含基于其中包含的文本的宽度。我希望后退按钮缩小到只有雪佛龙。请记住，这些元素中的文本是动态的，具体取决于用户从当前所处的位置和当前位置。

Plunker with real variable values within back and navigation button

编辑2：该解决方案需要在IE10和11，Chrome，FF和Safari中使用。因此，不要担心在IE方面支持任何较低的东西。

根据碰撞元素隐藏按钮内的文本

0 个答案: