HTML равная ширина границы и разрыв линии - PullRequest
Новая
       7

HTML равная ширина границы и разрыв линии

1 голос
/ 15 января 2020

У меня есть деталь HTML, которая выглядит следующим образом:

Table

Возможно ли иметь одинаковую границу для каждого слова? И как я могу добиться разрыва строки после "Köln"? Я пытался <br/>, но это не работает. Примерно так:

soll

Вот кодовая часть 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>

Ответы [ 3 ]

3 голосов
/ 15 января 2020

Я предлагаю вам забыть элемент «таблица» для этих карт, а затем попробуйте его с «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>
2 голосов
/ 15 января 2020

Посмотрите на 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>
1 голос
/ 15 января 2020

Когда вы используете таблицу, каждая строка должна быть в <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 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>
...