Question

代码链接：http://codepen.io/danessh/debug/uCBds

所需的效果是将任何添加的项目附加到带圆角的菜单中。这部分似乎有效，但CSS似乎没有像我预期的那样工作。

问题：

在第一次重叠之后添加的任何项目的边距，而不是像上次添加的项目一样显示。我可以看到这个，因为有不透明度设置。

问题：

第一个项目由CSS设置样式的可能原因是什么，以及以不同方式添加的所有其他项目都没有显示所有样式声明？

注意：项目被追加到$('#menu ul');个对象。当我使用$('li:last');添加项目时，显示的第一项与其他菜单项重叠。为现有菜单项设置了margin: -2px;，以便不会出现间隙。

Answer 1

2px空间实际上来自你的标记（有一堆articles on this）。如果删除<li>元素之间的空格，则空格将消失。这是使<li>元素内联的副作用。

动态创建的元素没有这个问题，所以你将它们移动到2px太远了。要修复它，请完全删除负边距，然后删除空格或将它们浮动到左侧。

Answer 2

编辑：我现在遇到了问题，问题是，当您从代码中添加新的li元素时，标记中没有生成whitespace，就像已经添加的元素中那样。

例如来自你的标记：

<li><a id="first" href="#">Who</a></li>
        <li><a href="#">What</a></li>
        <li><a id="last"href="#">When</a></li>

单击

添加元素后

 <li><a id="first" href="#">Who</a></li>
        <li><a href="#">What</a></li>
        <li><a href="#">When</a></li><li><a href="#">Who</a></li><li><a id="last" href="#">What</a></li>

注意generatd标记中没有空格

你可以尝试什么

 menu.append('<li><a id="last" href="'+ itemUrl.val() + '">'+ item.val().toUpperCase() + '</a></li>  ');

注意</li>

之后的额外两个空格当您处理inline元素时，

标记中的空格很重要。

Answer 3

试试这个css

#menu li {
  display: inline;
  float:left;

}

#menu a {
  background-color: purple;
  padding: 5px 30px; 
  color: white;
  text-decoration: none;
  font: 18px sans-serif;
  opacity: .9;
  text-transform: uppercase;
}

Answer 4

尝试使用css

#menu ul {  
            list-style: none;  
            margin: 0;  
            width: 100%;  
            display: block;  
            float: left;  
            margin-bottom: 20px;
          }
#menu li {  
            float: left;
         }

Answer 5

使用display: inline or inline-block时，这是DOM元素的已知问题。对于float元素，您需要做的是li。这是更新的codepen。

我还对您的代码进行了一些修改，例如首先删除ID＆amp;最后使用css选择器：first-child和last-child。

<强> JavaScript的：

function addMenuItem () {  
  var menu = $('#menu ul');
  var item = $('#itemName');
  var itemUrl = $('#itemUrl');
  if (item.val() && itemUrl.val()){
    menu.append('<li><a href="'+ itemUrl.val() + '">'+ item.val().toUpperCase() + '</a></li>');
    item.val('');
    itemUrl.val('');
  }
}

<强> CSS：

#menu ul {
  list-style: none;  

}

#menu li {
  display: inline-block;
  float: left;
}

#menu a {
  background-color: purple;
  padding: 5px 30px;
  margin: 0px;
  color: white;
  text-decoration: none;
  font: 18px sans-serif;
  opacity: .9;
  text-transform: uppercase;
}

li:first-child a {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;  
}

li:last-child a {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;     
}

#menu a:hover {
  background-color: orange;   
}

button {
  background-color: pink;  
  font-size: 14px;
  color: white;
  font-weight: bold;
  border-radius: 3px;
  margin-top: 5px;
  padding: 15px 32px;
}

button:hover {
  background-color: lightblue;  
}

input {
  background-color: whitesmoke;
  margin-top: 5px;
  padding: 10px 10px;
  display: block;
  font-weight: bold;
}

input, button {
  border: none;    

}

#workSpace {  
  width: 95%;
  padding: 20px;
  background-color: white;  
}


body{
  background-color: whitesmoke;
}
form {
  clear: both;
  margin-top: 50px;
}

HTML标记：

<div id="workSpace">
<div id="menu">
    <ul>
        <li><a href="#">Who</a></li>
        <li><a href="#">What</a></li>
        <li><a href="#">When</a></li>
    </ul>
</div>

<form>   
  <input id="itemName" type="text" placeholder="Menu Item" />  
  <input id="itemUrl" type="url" placeholder="Item URL" />
  <button type="button" onclick="addMenuItem()">Add Menu Item</button>
</form>
</div>

CSS未应用于所有附加列表元素

5 个答案: