在一行中显示路径，没有元素包装

Question

我需要一个div元素，其中div和search-item显示在一行中，div将包含文件夹名称和拆分（\）和{{1}将包含该文件夹的路径。

看起来像这样：

search-item

结构如下：

\ Some \ path

/* Search */
.app.searchbar.object {
  height: 50px;
  min-width: 100%;
  background: rgb(35, 35, 35);
  float: left;
  word-wrap: none;
  word-break: none;
  display: block;
}

.app.searchbar.item {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 5px;
  color: rgb(150, 150, 150);
  padding: 5px;
  display: inline-block;
  float: left;
}

.app.searchbar.item:hover {
  transition: all 0.1s ease;
  background: rgb(200, 200, 200);
  color: rgb(125, 125, 125);
  border-radius: 5px;
}

.app.searchbar.split {}
.app.searchbar.split::before {
  content: '\\';
  color: rgb(100, 100, 100);
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 5px;
  color: rgb(150, 150, 150);
  float: left;
}

当你运行代码片段时，你会发现它已经脱离了这一行，而我希望它能够将一行中的所有内容隐藏在填充之下。

向下滚动将导致向右滚动。但滚动条不应显示。

Answer 1

您可以添加width: 900px;（或任何适合您的固定宽度，但必须修复）和overflow-x:visible;到.app.searchbar.object，并删除其中的浮点数：

/* Search */
.app.searchbar.object {
  height: 50px;
  min-width: 100%;
  background: rgb(35, 35, 35);
  word-wrap: none;
  word-break: none;
  display: block;
  width: 900px;
  overflow-x:visible;
}

.app.searchbar.item {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 5px;
  color: rgb(150, 150, 150);
  padding: 5px;
  display: inline-block;
 float:left;
}

.app.searchbar.item:hover {
  transition: all 0.1s ease;
  background: rgb(200, 200, 200);
  color: rgb(125, 125, 125);
  border-radius: 5px;
}

.app.searchbar.split {}
.app.searchbar.split::before {
  content: '\\';
  color: rgb(100, 100, 100);
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 5px;
  color: rgb(150, 150, 150);
  float: left;
}

<div class="app searchbar object">
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="0">A</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="1">Very</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="2">Special</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="3">Path</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="4">That</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="5">Contains</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="6">Hidden</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="7">Files</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="8">That</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="9">Can</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="10">Ruin</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="11">Your</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="12">Life</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="13">So</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="14">Much</search-item>
</div>

Answer 2

将overflow: scroll; white-space: nowrap;添加到.app.searchbar.object并使用display：inline-block for .item' and。split`。好像是这样做的。

＆＃13;

＆＃13;

/* Search */
.app.searchbar.object {
  height: 50px;
  min-width: 100%;
  background: rgb(35, 35, 35);
  float: left;
  display: block;
  overflow: scroll;
  white-space: nowrap;
}
.app.searchbar.split{
   display: inline-block;
}
.app.searchbar.item {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 5px;
  color: rgb(150, 150, 150);
  padding: 5px;
  display: inline-block;
}

.app.searchbar.item:hover {
  transition: all 0.1s ease;
  background: rgb(200, 200, 200);
  color: rgb(125, 125, 125);
  border-radius: 5px;
}

.app.searchbar.split {}
.app.searchbar.split::before {
  content: '\\';
  color: rgb(100, 100, 100);
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 5px;
  color: rgb(150, 150, 150);
}

＆＃13;

<div class="app searchbar object">
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="0">A</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="1">Very</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="2">Special</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="3">Path</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="4">That</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="5">Contains</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="6">Hidden</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="7">Files</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="8">That</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="9">Can</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="10">Ruin</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="11">Your</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="12">Life</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="13">So</search-item>
  <div class="app searchbar split"></div>
  <search-item class="app searchbar item" item="14">Much</search-item>
</div>

＆＃13;

＆＃13;

＆＃13;