Question

我正在制作下拉菜单，显然我无法改变宽度，我尝试了不同的方法。我希望每列的宽度为200px，但它不起作用。

.dropbtn {
  background-image: url("../sliki/meni.png");
  width: 220px;
  height: 60px;
  border: none;
  cursor: pointer;
  display: inline;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 10px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {} #uslugibn {
  background-image: url("../sliki/banner.png");
  width: 100%;
  height: 300px;
}
#meninav {
  background-color: #41c2ac;
  height: 60px;
  margin: 0;
}
#meninav li {
  display: inline-block;
}

<div class="dropdown" style="float:left;">
  <button class="dropbtn"></button>
  <div class="dropdown-content" style="left:0;">
    <table>
      <tr>
        <td style="width:200px;">
          <a href="#">Берово</a>
          <a href="#">Битола</a>
          <a href="#">Богданци</a>
          <a href="#">Валандово</a>
          <a href="#">Велес</a>
          <a href="#">Виница</a>
        </td>
        <td style="width:200px;">
          <a href="#">Гевгелија</a>
          <a href="#">Гостивар</a>
          <a href="#">Дебар</a>
          <a href="#">Делчево</a>
          <a href="#">Демир Капија</a>
          <a href="#">Демир Хисар</a>
        </td>
        <td style="width:200px;">
          <a href="#">Кавадарци</a>
          <a href="#">Кичево</a>
          <a href="#">Кочани</a>
          <a href="#">Кратово</a>
          <a href="#">Крива Паланка</a>
          <a href="#">Куманово</a>
        </td>
        <td style="width:200px;">
          <a href="#">Крушево</a>
          <a href="#">Македоснки Брод</a>
          <a href="#">Македонска Каменица</a>
          <a href="#">Неготино</a>
          <a href="#">Охрид</a>
          <a href="#">Пехчево</a>
        </td>
        <td style="width:200px;">
          <a href="#">Прилеп</a>
          <a href="#">Пробиштип</a>
          <a href="#">Радовиш</a>
          <a href="#">Ресен</a>
          <a href="#">Свети Николе</a>
          <a href="#"><strong>Скопје</strong></a>
        </td>
        <td style="width:200px;">
          <a href="#">Струга</a>
          <a href="#">Струмица</a>
          <a href="#">Тетово</a>
          <a href="#">Штип</a>
        </td>
      </tr>
    </table>
  </div>
</div>

Answer 1

当您的表格不考虑宽度时，最好逐个单元地应用它。但是这个快速修复似乎对我有用：

table{
   table-layout: fixed;
   width: 100%;
}

<强> Working fiddle as well

Answer 2

将宽度添加到td内的锚点，它可以正常工作。

td > a {
  width: 200px;
}

演示：https://jsfiddle.net/1vkfg9nb/

Answer 3

其他答案已包含解决方案要解释为什么会发生这种情况：表总是尽量在他们拥有的空间中容纳尽可能多的内容。即使这意味着忽略规则，例如width。

现在在这种情况下，表格的父级绝对定位，因此其宽度不算数。这意味着表格的祖父母div仅（有效地）包含220px宽的按钮，因此它本身只有220px宽，是一个内联块。

所以......这就是桌子容器的宽度，以及它试图挤进的容器。这就是为什么它选择忽略它的宽度属性并且只使它自己像它的内容一样宽;它已经溢出了它的容器。

表TD宽度不起作用

3 个答案: