Question

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

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

我想将其位置固定在nav-items的右侧，而与内部字符串的长度无关。

按钮是Bootstrap dropdown button，位于我放置<div>的同一nav-items内：

<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>

我也将其位置设置为relative，因为我想相对于屏幕宽度来固定它（“ translate”是按钮的ID）：

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

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

但是如果我设置更大的值（例如300px），则在调整屏幕大小时该按钮会消失：

无论周围的元素如何，我如何确定此类按钮的位置？并且如何通过使其位置“相对”于浏览器窗口的大小来做到这一点？

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文件中，我为<div>元素创建了一个新的<h1>并将<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）我为margin-right元素分配了一个<h1>，以在标题和按钮之间放置距离：这样，我可以水平移动按钮（{的边距越宽{1}}，则按钮距离更远）：

<h1>

3）我将Bootstrap类h1 { margin-right: 585px; }分配给按钮以使其向右浮动（请参见Boostrap documentation）：

float-right

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

如何固定元素的位置而不考虑周围的项目？

3 个答案: