Question

我不希望在下拉内容中使用600％的宽度，而是希望将其自身调整为其内容的宽度......

我一直在寻找没有成功的地方。有谁知道我该怎么做？

<div class="dropdown">
          <button class="dropbtn">Language       </button>
          <div class="dropdown-content linguas">
                <a href="#" id="fr">       Français             </a>
                <a href="#" id="es">       Español              </a>
                <a href="#" id="en">       English              </a>
          </div>

编辑：

我希望这三个选项在同一条线上。这是最终结果的样子：http://unasus.ufcspa.edu.br/cidadesvirtuais/rafaela/img/final.png

Answer 1

将.dropdown-content的宽度和高度设为自动：

.dropdown-content {
  display: none;
  position: absolute;
    right: 0;
    padding-top: 0%;
    padding-bottom: 0%;
  width: auto;
    height: auto;


    background: white;
    overflow: hidden;
    border-radius: 25px;

    border: 3px solid #edede6;
    font-size: 5vh;
    font-family: Helvetica;
}

Fiddle

Answer 2

您可能需要在代码的CSS上更多地工作。

更新了以下代码以反映您的更改。

我认为你在元素上有太多的填充。内容宽度现在是93vw。（vw - 视口宽度）改变了像素。

＆＃13;

.dropbtn {
  background-color: transparent;
  background-image: url("https://www.acadaslate.com/App_Themes/Default/images/glyphicon-triangle-bottom.png");
  background-repeat: no-repeat;
  background-position: right center;
  color: black;
  border: none;
  cursor: pointer;
  white-space: pre;
  font-size: 5vh;
  font-family: Helvetica;
  padding-right: 28px;
}
.dropdown {
  position: absolute;
  display: inline-block;
  top: 12%;
  right: 5%;
  margin: 0 0;
}
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  padding-top: 0%;
  padding-bottom: 0%;
  width: 93vw;
  height: auto;
  background: white;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #edede6;
  font-size: 5vh;
  font-family: Helvetica;
}
.dropdown-content a {
  color: black;
  padding: 10px;
  text-decoration: none;
  display: inline-block;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: inline-block;
}
.dropdown:hover .dropbtn {
  background-color: transparent;
}
#fr {
  background-color: white;
  background-image: url("http://www.liderfitness.com.br/app/arquivos/img/default/cinza.png");
  background-repeat: no-repeat;
  background-position: left center;
  white-space: pre;
}
#es {
  background-color: white;
  background-image: url("http://www.liderfitness.com.br/app/arquivos/img/default/cinza.png");
  background-repeat: no-repeat;
  background-position: left center;
  white-space: pre;
}
#en {
  background-color: white;
  background-image: url("http://www.liderfitness.com.br/app/arquivos/img/default/cinza.png");
  background-repeat: no-repeat;
  background-position: left center;
  white-space: pre;
}

＆＃13;

<div class="dropdown">
  <button class="dropbtn">Language</button>
  <div class="dropdown-content linguas">
    <a href="#" id="fr">       Français             </a>
    <a href="#" id="es">       Español              </a>
    <a href="#" id="en">       English              </a>
  </div>
</div>

＆＃13;

如何调整下拉菜单宽度以适应其内容？

2 个答案: