HTML 相等的边框宽度和强制换行

Question

我有一个 HTML 部分看起来像这样：

是否可以为每个单词设置一个相等的边框？如何在 "Köln" 之后实现换行？我尝试了 <br/>，但它不起作用。看起来像这样的东西：

这是 HTML 代码部分：

function openLink(url) {
  window.open(url);
}

#sideNavBox {
  display: none
}

#contentBox {
  margin-left: 0px
}

.dd13:hover {
  cursor: pointer;
}

.dd13 {
  color: #FFFFFF;
  Font: 12px Arial background-color:: #48A040;
  Padding: 3px 3px 3px 3px;
}

<font size="3"><b>Seminare nach Standort filtern</b></font>
<div>
  <font size="3"><b><br/></b></font>
  <div>
    <br/>
    <table class="dd13">
      <tbody>
        <tr>
          <td onclick="openLink(&#39;/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm&#39;);" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Ulm</td>
          <td style="background-color: #ffffff;">&#160;</td>
          <td onclick="openLink(&#39;/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen&#39;);" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Taufkirchen</td>
          <td style="background-color: #ffffff;">&#160;</td>
          <td onclick="openLink(&#39;/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen&#39;);" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Oberkochen</td>
          <td style="background-color: #ffffff;">&#160;</td>
          <td onclick="openLink(&#39;/internalseminars/SitePages/InternalSeminars.aspx?locations=Köln&#39;);" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Köln</td>
          <td style="background-color: #ffffff;">&#160;</td>
          <td onclick="openLink(&#39;/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen&#39;);" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Friedrichshafen</td>
          <td style="background-color: #ffffff;">&#160;</td>
          <td onclick="openLink(&#39;/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar&#39;);" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Wetzlar</td>
          <td style="background-color: #ffffff;">&#160;</td>
          <td onclick="openLink(&#39;/internalseminars/SitePages/InternalSeminars.aspx?locations=Kiel&#39;);" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Kiel</td>
        </tr>
      </tbody>
    </table>
    <p>
      <br/>
    </p>
    <p>To register yourself to a seminar please click on this icon
      <a title="Book for me" class="book-for-me-button"></a>. To register someone else to a seminar, please click on this icon
      <a title="Book for me" class="book-for-user-button"></a>.<br/></p>
  </div>
</div>

Answer 1

我建议您忘记这些卡片的 "table" 元素，然后尝试使用 "span" 和 flexbox。您可以轻松地为其设置固定宽度，它会自动换行。

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  display: flex;
  width: 200px;
  margin: 5px;
  border-radius: 4px;
  background: #aaa;
  border: 1px solid greenyellow;
  text-align: center;
  padding: 5px;
}

<div class="container">
  <span class="card">example 1</span>
  <span class="card">Lorem Ipsum Dolor</span>
  <span class="card">example</span>
  <span class="card">test</span>
  <span class="card">paragraph</span>
  <span class="card">Day</span>
  <span class="card">Night</span>
</div>

Answer 2

看看 flex

请注意，下面的点击不会打开页面，因为 stacksnippet 沙箱正在阻止新 windows

window.addEventListener("load", function() {
  document.getElementById("nav").addEventListener("click", function(e) {
    var tgt = e.target;
    if (tgt.classList.contains("link")) {
      window.open(tgt.getAttribute("data-link"));
      [...document.querySelectorAll(".link.active")].forEach(lnk => lnk.classList.remove("active"));
      tgt.classList.add("active");
    }
  })
})

#nav {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 0px
}

.link {
  max-width: 150px;
  padding: 3px;
  margin: 10px;
  border: 2px solid lime;
  border-radius: 15px;
  flex-basis: 100%;
  text-align: center;
  cursor: pointer;
}

.active {
  background-color: lime
}

<h3><b>Seminare nach Standort filtern</b></h3>
<div id="nav">
  <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm">Ulm</div>
  <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen">Taufkirchen</div>
  <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen">Oberkochen</div>
  <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Köln">Köln</div>
  <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen">Friedrichshafen</div>
  <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar">Wetzlar</div>
  <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Kiel">Kiel</div>
</div>
<div id="register">
  <p>To register yourself to a seminar please click on this icon
    <a title="Book for me" class="book-for-me-button"></a>. To register someone else to a seminar, please click on this icon
    <a title="Book for me" class="book-for-user-button"></a>.<br/></p>
</div>

Answer 3

当您使用 table 时，每一行都应该在 <tr> 中。所以对于换行符最好添加一个新的<tr>。如果你想为你的单元格设置相同的宽度，你可以为 <td> 设置宽度。例如：

<style>
      table {
      table-layout: fixed ;
      width: 100% ;
    }
    td {
        width: 25% ;
       text-align: center;
       color: black;
       border: 3px solid limegreen;
       font-size: 17px
    }
 </style>

和你的table：

   <table class="dd13">
      <tbody>
        <tr>
          <td onclick="openLink(#);" class="dd13">Ulm</td>
          <td onclick="openLink(#);" class="dd13">Taufkirchen</td>
          <td onclick="openLink(#);" class="dd13">Oberkochen</td>
          <td onclick="openLink(#);" class="dd13">Köln</td>
         </tr>
         <tr>
            <td onclick="openLink(#);" class="dd13">Friedrichshafen</td>
            <td onclick="openLink(#);" class="dd13">Wetzlar</td>
            <td onclick="openLink(#);" class="dd13">Kiel</td>
        </tr>
      </tbody>
    </table>

HTML 相等的边框宽度和强制换行

HTML equal border width and forcing line break

html

formatting

border