无论周围的项目如何，如何固定元素的位置？

Question

我创建了一个搜索表单，其中包含一些 nav-tabs 和一个让用户更改语言的按钮。 我的问题是，每当我更改语言时，按钮的位置也会发生变化，因为 nav-items 中的字符串长度不同（例如，如果我用西班牙语翻译“City”，则字符串变为“Ciudad”并且按钮向右移动，因为字符串的长度更大）。

换句话说，当字符串较长时，nav-tabs 的框也会变宽，因此按钮会向右移动。

我想把它的位置固定在nav-items的右边，与里面的字符串长度无关。

该按钮是一个Bootstrap dropdown button，并且位于我放置nav-items 的同一个<div> 中。我还将其位置设置为relative，因为我想根据屏幕宽度来修复它（“translate”是按钮的ID）：

#translate {
  background-color: #d63040;
  position: relative;
  left: 100px;
}

<ul class="form-inline nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a lang="en" class="nav-link active" id="citta-tab" data-toggle="tab" href="#citta" role="tab" aria-controls="citta" aria-selected="true">CITY</a>
  </li>
  <li class="nav-item">
    <a lang="en" class="nav-link" id="regione-tab" data-toggle="tab" href="#region" role="tab" aria-controls="region" aria-selected="false">REGION</a>
  </li>
  <li class="nav-item">
    <a lang="en" class="nav-link" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="false">ABOUT</a>
  </li>
  <div class="btn-group">
    <button id="translate" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-language"></i>
                        </button>
    <div class="dropdown-menu">
      <a id="itButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('it');return false;">It</a>
      <a id="frButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('fr');return false;">Fr</a>
      <a id="enButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('en');return false;">En</a>
      <a id="esButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('es');return false;">Es</a>
    </div>
  </div>
</ul>

理想情况下，我想将位置固定在导航项的右侧，如下图所示：

但是，如果我设置了一个更大的值（例如 300 像素），那么当我调整屏幕大小时按钮就会消失：

无论周围的元素如何，我​​如何才能固定这样一个按钮的位置？我怎样才能通过保持其位置“相对于”浏览器窗口的大小来做到这一点？

Answer 1

这可能是解决我们问题的一种方法

.navbar {
  display: flex;
  justify-content: space-between;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar">
  <ul class="form-inline nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a lang="en" class="nav-link active" id="citta-tab" data-toggle="tab" href="#citta" role="tab" aria-controls="citta" aria-selected="true">CITY</a>
    </li>
    <li class="nav-item">
      <a lang="en" class="nav-link" id="regione-tab" data-toggle="tab" href="#region" role="tab" aria-controls="region" aria-selected="false">REGION</a>
    </li>
    <li class="nav-item">
      <a lang="en" class="nav-link" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="false">ABOUT</a>
    </li>

  </ul>
  <div class="btn-group">
    <button id="translate" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fas fa-language"></i>
                    </button>
    <div class="dropdown-menu">
      <a id="itButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('it');return false;">It</a>
      <a id="frButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('fr');return false;">Fr</a>
      <a id="enButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('en');return false;">En</a>
      <a id="esButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('es');return false;">Es</a>
    </div>
  </div>
</nav>

Answer 2

position: static;
white-space: normal;
float: right;

希望这对你有用。

Answer 3

我通过以下方式解决了这个问题：

1) 在 HTML 文件中，我为 <h1> 元素创建了一个新的 <div> 并将 <button> 移动到其中：

<div class="form-inline">

            <!-- h1 element -->
            <a href="" class="link-home" id="buttonTitle"><h1 id="TitleH1" class="display-4"> Discover the Amazing
                Route </h1></a>

            <!-- Button -->                
            <div class="btn-group float-right">
                <button id="translate" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-language"></i>
                </button>
                <div class="dropdown-menu">
                    <a id="itButton" class="dropdown-item" href="#lang-en"
                       onclick="window.lang.change('it');return false;">It</a>
                    <a id="frButton" class="dropdown-item" href="#lang-en"
                       onclick="window.lang.change('fr');return false;">Fr</a>
                    <a id="enButton" class="dropdown-item" href="#lang-en"
                       onclick="window.lang.change('en');return false;">En</a>
                    <a id="esButton" class="dropdown-item" href="#lang-en"
                       onclick="window.lang.change('es');return false;">Es</a>
                </div>
            </div>

        </div>

2) 我为<h1> 元素分配了一个margin-right 来放置标题和按钮之间的距离：这样做，我可以水平移动按钮（<h1> 的边距越宽，按钮更远）：

h1 {        
    margin-right: 585px;
}

3) 我将 Bootstrap 类 float-right 分配给按钮以使其向右浮动（参见 Boostrap documentation）：

<div class="btn-group float-right">
  <!-- ... --> 
</div>

通过这样做，我可以将按钮放置在我想要的位置；同时在调整浏览器窗口大小并尽可能小时它不会消失。