显示内联时控制溢出

Question

我正试图在无序列表的两侧都有按钮溢出。但是，我花了很长时间才研究这个问题，似乎无法弄清楚如何去做。

我的目标是左边有一个按钮，右边有一个按钮，然后是中间的无序列表，溢出-x隐藏和可滚动。

JSFiddle：https://jsfiddle.net/xuak1xek/

HTML / CSS：

package com.dsalgo;

import java.util.ArrayList;
import java.util.List;
import java.util.TreeMap;

public class BinaryTreeNicePrint {

 public static void main(String[] args) {
  Node a = new Node(1);
  Node b = new Node(2);
  Node c = new Node(3);
  Node d = new Node(4);
  Node e = new Node(5);
  Node f = new Node(8);
  Node g = new Node(6);
  Node h = new Node(7);
  Node i = new Node(9);
  a.left = b;
  a.right = c;
  b.left = d;
  b.right = e;
  c.left = i;
  c.right = f;
  f.left = g;
  f.right = h;
  nicePrint(a);
 }

 public static void nicePrint(Node root) {
  List< StringPoint > result = getStrings((getWidth(root) + 1) / 2, 0, root);
  TreeMap< Integer, List< StringPoint > > lines = new TreeMap<  >();
  for (StringPoint s : result) {
   if (lines.get(s.y) != null) {
    lines.get(s.y).add(s);
   } else {
    List< StringPoint > l = new ArrayList<  >();
    l.add(s);
    lines.put(s.y, l);
   }
  }
  for (List< StringPoint > l : lines.values()) {
   System.out.println(flatten(l));
  }
 }

 private static String flatten(List< StringPoint > l) {
  int x = 0;
  StringBuilder sb = new StringBuilder();
  for (StringPoint s : l) {
   sb.append(new String(new char[s.x - x]).replace('\0', ' '));
   sb.append(s.value);
   x = sb.length();
  }
  return sb.toString();
 }

 private static int getWidth(Node root) {
  int width = 0;
  if (root.left != null) {
   width += getWidth(root.left);
  }
  if (root.right != null) {
   width += getWidth(root.right);
  }
  width += ("" + root.value).length();
  return width;
 }

 private static List< StringPoint > getStrings(int x, int y, Node root) {
  List< StringPoint > result = new ArrayList< StringPoint >();
  result.add(new StringPoint(x - ("" + root.value).length() / 2, y, ""
    + root.value));
  if (root.left != null) {
   int width = getWidth(root.left);
   int i = 0;
   for (; i <  (width + 1) / 2; ++i)
    result.add(new StringPoint(x - i - 1, y + i + 1, "/"));
   result.addAll(getStrings(x - i - 1, y + i + 1, root.left));
  }
  if (root.right != null) {
   int width = getWidth(root.right);
   int i = 0;
   for (; i <  (width + 1) / 2; ++i)
    result.add(new StringPoint(x + i + 1, y + i + 1, "\\"));
   result.addAll(getStrings(x + i + 1, y + i + 1, root.right));
  }
  return result;
 }

 static class StringPoint {
  Integer x;
  Integer y;
  String value;

  StringPoint(int x, int y, String value) {
   this.x = x;
   this.y = y;
   this.value = value;
  }

  @Override
  public String toString() {
   return "(" + x + "," + y + "," + value + ")";
  }
 }

 static class Node {
  Node left;
  Node right;
  int value;

  public Node(int value) {
   this.value = value;
  }
 }
}

button {
  display: inline;
  float: left;
}
ul#menu {
  padding: 0;
  display: inline;
  overflow-x: scroll;
  white-space: nowrap;
}
ul#menu li {
  display: inline;
}
ul#menu li a {
  background-color: black;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
  background-color: orange;
}

Answer 1

问题是您要将display元素的#menu设置为inline。这样做时，它将具有"shrink-to-fit" width并获取其子元素的大小。因此，没有滚动条（就像您在示例中看到的那样）。

一种选择是将display元素的#menu设置为inline-block，然后在其上设置宽度。例如：

Updated Example

button {
  display: inline-block;
  vertical-align: middle;
}
ul#menu {
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  width: 400px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
ul#menu li {
  display: inline-block;
}
ul#menu li a {
  background-color: black;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
  background-color: orange;

<h2>Horizontal List</h2>
<div class="wrapper">
  <button type="button">Click Me!</button>
  <ul id="menu">
    <li><a href="/html/default.asp">HTML</a></li>
    <li><a href="/css/default.asp">CSS</a></li>
    <li><a href="/js/default.asp">JavaScript</a></li>
    <li><a href="/php/default.asp">PHP</a></li>
    <li><a href="/html/default.asp">HTML</a></li>
    <li><a href="/css/default.asp">CSS</a></li>
    <li><a href="/js/default.asp">JavaScript</a></li>
    <li><a href="/php/default.asp">PHP</a></li>
    <li><a href="/html/default.asp">HTML</a></li>
    <li><a href="/css/default.asp">CSS</a></li>
    <li><a href="/js/default.asp">JavaScript</a></li>
    <li><a href="/php/default.asp">PHP</a></li>
    <li><a href="/html/default.asp">HTML</a></li>
    <li><a href="/css/default.asp">CSS</a></li>
    <li><a href="/js/default.asp">JavaScript</a></li>
    <li><a href="/php/default.asp">PHP</a></li>
    <li><a href="/html/default.asp">HTML</a></li>
    <li><a href="/css/default.asp">CSS</a></li>
    <li><a href="/js/default.asp">JavaScript</a></li>
    <li><a href="/php/default.asp">PHP</a></li>
  </ul>
  <button type="button">Click Me!</button>
</div>

ul#menu {
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  width: 400px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

您还可以使用calc()减去button元素的宽度：

Updated Example

button {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
}
ul#menu {
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 200px);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
ul#menu li {
  display: inline-block;
}
ul#menu li a {
  background-color: black;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
  background-color: orange;
}

<h2>Horizontal List</h2>
<div class="wrapper">
  <button type="button">Click Me!</button><!--
--><ul id="menu">
    <li><a href="/html/default.asp">HTML</a></li>
    <li><a href="/css/default.asp">CSS</a></li>
    <li><a href="/js/default.asp">JavaScript</a></li>
    <li><a href="/php/default.asp">PHP</a></li>
    <li><a href="/html/default.asp">HTML</a></li>
    <li><a href="/css/default.asp">CSS</a></li>
    <li><a href="/js/default.asp">JavaScript</a></li>
    <li><a href="/php/default.asp">PHP</a></li>
    <li><a href="/html/default.asp">HTML</a></li>
    <li><a href="/css/default.asp">CSS</a></li>
    <li><a href="/js/default.asp">JavaScript</a></li>
    <li><a href="/php/default.asp">PHP</a></li>
    <li><a href="/html/default.asp">HTML</a></li>
    <li><a href="/css/default.asp">CSS</a></li>
    <li><a href="/js/default.asp">JavaScript</a></li>
    <li><a href="/php/default.asp">PHP</a></li>
    <li><a href="/html/default.asp">HTML</a></li>
    <li><a href="/css/default.asp">CSS</a></li>
    <li><a href="/js/default.asp">JavaScript</a></li>
    <li><a href="/php/default.asp">PHP</a></li>
  </ul><!--
--><button type="button">Click Me!</button>
</div>

button {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
}
ul#menu {
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 200px);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

但是，更多灵活的方法是使用flexbox布局并使用包装器包装#menu元素和按钮。然后，您可以将display元素的.wrapper设置为`flex。

Updated Example

.wrapper {
  display: flex;
}
ul#menu {
  padding: 0;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
ul#menu li {
  display: inline-block;
}
ul#menu li a {
  background-color: black;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px 4px 0 0;
}

<h2>Horizontal List</h2>
<div class="wrapper">
  <button type="button">Click Me!</button>
  <ul id="menu">
    <li><a href="/html/default.asp">HTML</a></li>
    <li><a href="/css/default.asp">CSS</a></li>
    <li><a href="/js/default.asp">JavaScript</a></li>
    <li><a href="/php/default.asp">PHP</a></li>
    <li><a href="/html/default.asp">HTML</a></li>
    <li><a href="/css/default.asp">CSS</a></li>
    <li><a href="/js/default.asp">JavaScript</a></li>
    <li><a href="/php/default.asp">PHP</a></li>
    <li><a href="/html/default.asp">HTML</a></li>
    <li><a href="/css/default.asp">CSS</a></li>
    <li><a href="/js/default.asp">JavaScript</a></li>
    <li><a href="/php/default.asp">PHP</a></li>
    <li><a href="/html/default.asp">HTML</a></li>
    <li><a href="/css/default.asp">CSS</a></li>
    <li><a href="/js/default.asp">JavaScript</a></li>
    <li><a href="/php/default.asp">PHP</a></li>
    <li><a href="/html/default.asp">HTML</a></li>
    <li><a href="/css/default.asp">CSS</a></li>
    <li><a href="/js/default.asp">JavaScript</a></li>
    <li><a href="/php/default.asp">PHP</a></li>
  </ul>
  <button type="button">Click Me!</button>
</div>

.wrapper {
  display: flex;
}

ul#menu {
  padding: 0;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

Answer 2

如果你用这件作品替换你的风格，它可能会让你想要：

ul#menu {
    padding: 0;
    display: inline-block;
    width: 300px;
    height: 45px;
    overflow-x: scroll;
    white-space: nowrap;
}

设置ul以显示为内联块并指定特定宽度。否则它想要占据整个宽度并碰撞它上方和下方的按钮。如果它不是你想要的 - 也许它会给你新的想法。