Question

这是我第一次实施标准的html导航。然而，导航中的列表元素并没有按照我希望的方式定位在导航中，虽然我已经改变了大多数想到的明显属性，但我还没能：

将导航中的li元素居中
使li元素的宽度完全适合nav

我不明白为什么默认情况下他们的父容器右侧位置如此笨拙，或者为什么设置宽度：100％＆＃39;不是解决方案。当我将li元素上的定位设置为绝对时，它似乎会破坏所有内容，因为我需要将每个列表元素相对于放置前元素的位置进行定位。

似乎有一些可行的方法可以解决这个问题，但它们看起来有点像hackish，我想知道是否有一个更明显的解决方案，我缺乏经验。

＆＃13;

nav {
  width: 40%; height: 500px;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  border: 2px solid black; 
}

nav ul li {
  list-style: none; text-align: center;
  width: 99%; height: 100%;
  position: inherit;
  padding: 1%;
  border: 2px solid black;
  border-top: none;
  margin: 0;
  display: block;
  background: blue;
}

＆＃13;

<nav><!--
  --><ul><!--
   --><li class="user">WelcomeVids</li>
      <li class="user">Diablo</li>
      <li class="user">FreeCodeCamp</li>
      <li class="user">OtherStuff</li>
      <li class="user">Dota2</li><!--
  --></ul><!--
--></nav>

＆＃13;

要查看输出，请查看我的Codepen：http://codepen.io/sentedelviento/full/grzrgR/

Answer 1

这是因为大多数浏览器都默认将<ul>添加到/* Added */ ul { padding-left: 0; } nav { width: 40%; height: 500px; left: 50%; transform: translateX(-50%); position: relative; border: 2px solid black; } nav ul li { list-style: none; text-align: center; /* width: 99%; height: 100%; */ position: inherit; padding: 1%; border: 2px solid black; border-top: none; margin: 0; display: block; background: blue; }。您可以覆盖：

<nav><!--
  --><ul><!--
   --><li class="user">WelcomeVids</li>
      <li class="user">Diablo</li>
      <li class="user">FreeCodeCamp</li>
      <li class="user">OtherStuff</li>
      <li class="user">Dota2</li><!--
  --></ul><!--
--></nav>

Dim SQL As String
Dim db As DAO.Database
Dim tblDSA As DAO.Recordset

Set db = CurrentDb

Set tblDSA = db.OpenRecordset("tblDSA")

   SQL = "SELECT * Nz((Val[A1_MFI])) + Nz((Val[A2_MFI])) + Nz((Val[B1_MFI])) + Nz((Val[B2_MFI])) +  Nz((Val[C1_MFI])) + Nz((Val[C2_MFI])) + Nz((Val[DR1_MFI]))+ Nz((Val[DR2_MFI])) + Nz((Val[DQB1_MFI] + Nz((Val[DQB2_MFI]))as TotalScore FROM tblDSA WHERE [LABCODE] = " & Me.tbLabcode.Value & " ORDER BY TotalScore DESC "


Debug.Print SQL

Set rs = db.OpenRecordset(SQL)

Answer 2

我建议您对CSS进行以下更改：

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  box-sizing: border-box;
  width: auto;
}

为什么有空格将列表项与其parentr分开？

2 个答案: