Question

基本上问题是菜单第二级的<li>text</li>不会拉伸，默认为我给它的最小宽度 - 如果我声明min-width:30px并且文本更长则停止在30px并包装文本。基本上表现得像max-width会，但它只发生在第二级嵌套<li>上。直播：http://jsfiddle.net/fskbS/10/

示例css

ul#nav {
    float:left;
    height:30px;
    background:#999;
}

ul#nav li { float:left; }

ul#nav li a, #nav li a:link {
    display:block;
    min-width:30px;
    height:26px;
    padding:2px 10px;
    line-height:150%;
    border:1px solid black;
}

ul#nav li a:hover { color:#960; }

/* initially hide the first level ul dropdown */

ul#nav li ul {
    position:absolute;
    left:-9999px;
}

/* initially hide the second level ul dropdown */

ul#nav li ul ul {
    position:absolute;
    left:-9999px;
}

/* mouse overing the same li does two things: */

/* hides 3-rd ul*/

ul#nav li:hover ul ul { left:-9999px; }

/* displays second ul in hierarchy*/

ul#nav li:hover ul {
    display:absolute;
    left:auto;
    top:30px;
}

ul#nav li li:hover ul {
    display:absolute;
    left:100%;
    top:0;
    width:auto;
}

/*float:none so it displays vertically*/

ul#nav li li {
    float:none;
    min-width:30px;
    background:#C2E4EB;
    overflow:hidden;
}

/* li is targeted and bg-color gets applied but min-width won't work*/

ul#nav ul ul li {
    float:none;
    min-width:30px;
    background:#F93;
    overflow:hidden;
}

示例HTML

<ul id="nav">
  <li>
    <a href="#">German Auto</a>
    <ul>
      <li>
        <a href="#">Bayerische Motoren Werke</a>
        <ul>
          <li>
            <a href="#">Coupe Z series</a>
          </li>
          <li>
            <a href="#">Sedan X1 series</a>
          </li>
          <li>
            <a href="#">Sedan X3 series</a>
          </li>
          <li>
            <a href="#">Sedan X5 series</a>
          </li>
          <li>
            <a href="#">Sedan 7 series</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Mercedes Benz</a>
      </li>
      <li>
        <a href="#">Volks Wagen</a>
      </li>
      <li>
        <a href="#">Audi</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Shop</a>
  </li>
</ul>

Answer 1

您可以添加：

#nav a {
    white-space:nowrap;
}

这将导致文本只占用一行而不是包装。

演示：http://jsfiddle.net/fskbS/19/

Answer 2

这是我的两分钱。

我建议你远离这种类型的菜单，我必须小心地将鼠标向右移动，这样我才能点击子子菜单。

只需将sub子选项设置在sub和style下面（加上margin）。

我接受了这个。并使用户更容易。并减少了CSS。

http://jsfiddle.net/fskbS/10/

享受

Answer 3

对于我来说，它不起作用，因为我直接申请了@foreach($data as $row) <tr> <td>{{ $row->type }}</td> <td>{{ $row->station }}</td> <td>{{ $row->description }}</td> <td>{{ $row->comment }} </td> <td>{{ $row->status }}</td> <td class="text-center"> <a href="{{ route('view-complaint', $row->id) }}" class="btn btn-primary btn-sm"><i class="fa fa-eye mr-1" aria-hidden="true"></i>Show</a> <a href="{{ route('edit-complaint', $row->id) }}" class="btn btn-warning btn-sm"><i class="fa fa-pencil mr-1" aria-hidden="true"></i>Edit</a> <form action="{{ route('delete-complaint', $row->id) }}" method="post" class="d-inline-block"> @csrf @method('DELETE') <button type="submit" class="btn btn-danger btn-sm"><i class="fa fa-trash mr-1" aria-hidden="true"></i>Delete</button> </form> </td> </tr> @endforeach，

public function index()
    {
        $data = Complaint::latest()->paginate(5);
        return view('pages.allComplaints', compact('data'))->with('i', (request()->input('page', 1) - 1) * 5);
    }

在这里，您要给<li>标签使用最小宽度，以便它起作用，但是在第二层上，您要直接将其赋予ul#nav li a, #nav li a:link { display:block; min-width:30px; height:26px; padding:2px 10px; line-height:150%; border:1px solid black; }，所以这可能就是为什么它不起作用

就像

<a>

css min-width适用于第一级<li>列表，但不适用于层次结构中的第二级</li>

3 个答案: