Question

我有一个div，里面有一个表，它用来创建它的链接。到目前为止，这是我为网站所做的一切。我试图将行分隔开，以便我可以将jQuery实现到它中，但是，我还没有开始。

我的问题是我无法在整个div中均匀地获取行。我尝试过左/右填充，然而，它不适用于宽度和高度，并且左/右边距不起作用。有没有办法做到这一点？或者，我是否应该摆脱使用表并为每个导航选项创建div的想法？

Answer 1

这里有一个使用列表和显示的可能解决方案：flex for positioning。您更新的示例：https://repl.it/Hj62/6。

HTML部分：

<div id="header-nav-content">
  <ul class="table-nav-content">
     <li class="nav-home">Home</li>
     <li class="nav-about">About</li>
     <li class="nav-contact">Contact</li>
  </ul>
</div>

CSS部分：

.table-nav-content {
    text-align: center;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0;
}
.table-nav-content li {
    list-style: none;
}

您还可以检查：

justify-content: space-between;

并不适合你。您可以找到有关弹性定位的更多信息，例如：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

我建议您使用HTML列表方法https://www.w3schools.com/html/html_lists.asp。您可能希望使用边距而不是填充来均匀地分隔每个项目When to use margin vs padding in CSS。

<ul style="list-style:none;">
        <li style="display:block;float:left;margin:5px" class="nav-home">Home</li>
        <li style="display:block;float:left;margin:5px" class="nav-about">About</li>
        <li style="display:block;float:left;margin:5px" class="nav-contact">Contact</li>
</ul>

在div

2 个答案: