Question

我目前在CSS方面遇到了一些问题。我正在使用带有一些水平链接的导航栏和最后的下拉菜单。

在小屏幕上，链接会折叠成汉堡包菜单。我尝试做的是，当链接崩溃时，我希望下拉按钮旁边的最后一个链接放在下拉按钮之后。

以下是未拆分并打开下拉列表时的样子：

这就是目前崩溃的样子：

这就是我希望它的样子：

我不知道如何做到这一点。我试过浮动＆＃34;个人资料名称＆＃34;在右边，它有点工作，因为它将自己置于＆＃34; IMG＆＃34;但是一直到右边。我希望它能够贴近＆＃34; IMG＆＃34;。将它填充到正确的位置会增加响应性。

我使用bootstrap作为响应和下拉菜单。我假设我将不得不使用媒体查询。

如果有人知道如何做到这一点，我非常感谢任何提示！

这是一个代码

＆＃13;

<ul>
  <li class="horizontal-align">Link 1</li>
  <li class="horizontal-align">Link 2</li>
  <li class="horizontal-align">Profile name</li>
  <li class="horizontal-align"> <img class="Profile-img" />
    <ul>
      <li class="dropdown-li">Link 3</li>
      <li class="dropdown-li">Link 4</li>
      <li class="dropdown-li">Link 5</li>
    </ul>
  </li>
</ul>

＆＃13;

在汉堡包模式下保持下拉菜单是另一天的问题。

Answer 1

所以简单地这样写

<li class="horizontal-align"> <img class="Profile-img" src="https://www.w3schools.com/w3css/img_fjords.jpg"/>Profile name

＆＃13;

.Profile-img {
  width: 20px;
  height: 10px;
}

＆＃13;

<ul>
  <li class="horizontal-align">LinkLink 1</li>
  <li class="horizontal-align">Link 2</li>
  <li class="horizontal-align"> <img class="Profile-img" src="https://www.w3schools.com/w3css/img_fjords.jpg" />Profile name
    <ul>
      <li class="dropdown-li">Link 3</li>
      <li class="dropdown-li">Link 4</li>
      <li class="dropdown-li">Link 5</li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

检查bootstrap 4官方文档。我昨天用它来做一个导航栏，它的响应速度非常好。
https://v4-alpha.getbootstrap.com/components/navbar/如果您想在代码中包含bootstrap 4，请将其添加到head标签中

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Answer 3

这已经解决了。解决方案简直令人尴尬。我在一个div中包含了配置文件名称和img，并将其设置为width：fit-content。然后，当使用媒体查询将配置文件名称上的浮动更改为右侧时，它将自己定位在img旁边。

感谢您的回复！

如何响应地在链接栏中放置链接

3 个答案: