Question

我一直在尝试在放大时修复li中文本的重叠，但我无法找到解决方案，这里是指向JSFiddle的链接。如果有人能够帮助我，我将很高兴。

Answer 1

我已更新的内容：

在 listItems

超链接

删除了float：右边的单元格
将min-width添加到每列的第一个单元格
将宽度属性移至秒单元格

<强> CSS

a {
  text-decoration: none;
}

table {
  display: inline-block;
  line-height: 10px;
  padding: 0px;
  margin: 0px;
  vertical-align: middle;
}

td {
  height: 20px;
}

ul {
  padding: 0px;
  min-width: 700px;
  margin: 0px;
  overflow: hidden;
}

img {
  vertical-align: middle;
  margin-left: 5px;
}

#main_forums li:hover {
  background: #EEE;
  border: 1px solid #EEE;
  border-radius: 4px;
}

#main_forums .main_forum_container li {
  border: 1px solid #FFF;
  clear: both;
  border-radius: 4px;
  display: block;
  min-height: 50px;
  height: 50px;
  min-width: 900px;
  padding-bottom: 10px;
}

#main_forums {
}

.sub_description {
 min-width:300px;
}

#main_forums .main_forum {
  background: #880000;
  margin-top: 10px;
  border: 1px solid #800;
  border-radius: 4px;
}

.main_forum_header {
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
}

.main_forum_container {
  background: #FFF;
  color: #800;
  border: 4px solid #800;
  padding: 10px;
}

<强> HTML

  <div id="main_forums">
    <div class="main_forum">
      <div class="main_forum_header">
        <img src="images/programming.png" height="70" width="70">
        <span class="main_forum_title">Programming</span>
      </div>
      <div class="main_forum_container">
        <ul>
          <li>
            <a href="?p=forums&amp;forum_id=2&amp;sub_id=1">
              <img src="images/php.png" height="60" width="60">
              <table border="1">
                <tbody>
                  <tr>
                    <td class="sub_description" >
                      <span>PHP - Web Programming</span>
                    </td>
                    <td style="margin-right: 0px;">Posts: 12011</td>
                  </tr>
                  <tr>
                    <td class="sub_description" style="font-size: 12px;" >PHP web applications.</td>
                    <td>Views: 12012311</td>
                  </tr>
                </tbody>
              </table>
            </a>
          </li>
          <li>
            <a href="?p=forums&amp;forum_id=2&amp;sub_id=2">
              <img src="images/python.png" height="60" width="60" />
              <table>
                <tbody>
                  <tr>
                    <td class="sub_description" >
                      <span>Python - Application Programming</span>
                    </td>
                    <td style="margin-right: 0px;">Posts: 12011</td>
                  </tr>
                  <tr>
                    <td class="sub_description" style="font-size: 12px;" >Python Application programming</td>
                    <td>Views: 12012311</td>
                  </tr>
                </tbody>
              </table>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="main_forum">
      <div class="main_forum_header">
        <img src="images/web_developing.png" height="70" width="70" />
        <span class="main_forum_title">Web Developing</span>
      </div>
      <div class="main_forum_container">
        <ul>
          <li>
            <a href="?p=forums&amp;forum_id=1&amp;sub_id=4">
              <img src="images/css.png" height="60" width="60" />
              <table>
                <tbody>
                  <tr>
                    <td class="sub_description">
                      <span>CSS</span>
                    </td>
                    <td style="margin-right: 0px;">Posts: 12011
                    </td>
                  </tr>
                  <tr>
                    <td class="sub_description" style="font-size: 12px;" >Cascading Style Sheets</td>
                    <td>Views: 12012311</td>
                  </tr>
                </tbody>
              </table>
            </a>
          </li>
          <li>
            <a href="?p=forums&amp;forum_id=1&amp;sub_id=3">
              <img src="images/html.png" height="60" width="60" />
              <table>
                <tbody>
                  <tr>
                    <td class="sub_description">
                      <span>HTML</span>
                    </td>
                    <td style="margin-right: 0px;">Posts: 12011</td>
                  </tr>
                  <tr>
                    <td class="sub_description" style="font-size: 12px;" >HyperText Markup Language</td>
                    <td>Views: 12012311</td>
                  </tr>
                </tbody>
              </table>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

Answer 2

桌子有原因吗？我要做的第一件事就是删除表格。事实上，你的HTML都不是语义的。您有li标签内的表和li标签，超链接包围。

<ul>
<li>
    <a href="?p=forums&amp;forum_id=2&amp;sub_id=1">
        <img src="images/php.png" height="60" width="60">
        <span>PHP - Web Programming</span>
        Posts: 12011
        PHP web applications.   
        Views: 12012311
    </a>
</li>
<li>
    <a href="?p=forums&amp;forum_id=2&amp;sub_id=2">
        <img src="images/python.png" height="60" width="60">
        <span>Python - Application Programming</span>
        Posts: 12011
        Python Application programming      
        Views: 12012311
    </a>
</li>
</ul>

http://jsfiddle.net/pLy92/
看看它是如何清理的？这些都是内联元素，因此它们排成一行。

Answer 3

删除<a href="?p=forums&forum_id=1&sub_id=4">\

中的斜杠（）

列表项文本重叠

3 个答案: