Question

这样做 - 每个菜单项都有第一个字母大写

＆＃13;

$(function() {
    $("#navcontainer").append('<ul class="nav">\
        <li><a href="#">beverages</a></li>\
        <li><a href="#">meats</a></li>\
        <li><a href="#">cheeses</a></li>\
        <li><a href="#">vegetables</a></li>\
        <li><a href="#">fruit</a></li>\
    </ul>'
  );
  window.console&&console.log($("#navcontainer").html());
});

＆＃13;

#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}
#navcontainer ul li {
    display: inline;
}
#navcontainer ul li a {
    text-decoration: none;
    text-transform: capitalize;
    padding: .2em 1em;
    color: #fff;
    background-color: #036;
}
#navcontainer ul li a:hover {
    color: #fff;
    background-color: #369;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="navcontainer"></div>

＆＃13;

当我通过阅读页面上的菜单div动态构建菜单时，它不起作用。相同的CSS - 结果是只有FIRST项目的第一个字母是大写的

＆＃13;

$(function () {
    /* Create top navigation */
    var $ul = $("<ul/>",{"class":"nav"})
    $(".menu").each(function() {
        $ul.append('<li><a href="#">'+this.id+'</a></li>');
    });
    $("#navcontainer").append($ul);
    window.console&&console.log($("#navcontainer").html());
});

＆＃13;

#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}
#navcontainer ul li {
    display: inline;
}
#navcontainer ul li a {
    text-decoration: none;
    text-transform: capitalize;
    padding: .2em 1em;
    color: #fff;
    background-color: #036;
}
#navcontainer ul li a:hover {
    color: #fff;
    background-color: #369;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="navcontainer"></div>
<div id="beverages" class="menu">
   <ul>
        <li><a href="#">Beer</a></li>
        <li><a href="#">Whiskey</a></li>
        <li><a href="#">Wine</a></li>
        <li><a href="#">Fizzy drinks</a></li>
        <li><a href="#">Water</a></li>
    </ul>
</div>
<div id="meats" class="menu">
   <ul>
        <li><a href="#">Chicken</a></li>
        <li><a href="#">Lamb</a></li>
        <li><a href="#">Beef</a></li>
        <li><a href="#">Veal</a></li>
    </ul>
</div>
<div id="cheeses" class="menu">
   <ul>
        <li><a href="#">Gouda</a></li>
        <li><a href="#">Parmesan</a></li>
        <li><a href="#">Ricotta</a></li>
        <li><a href="#">Mascarpone</a></li>
    </ul>
</div>
<div id="vegetables" class="menu">
   <ul>
        <li><a href="#">Onion</a></li>
        <li><a href="#">Carrot</a></li>
        <li><a href="#">Broccoli</a></li>
        <li><a href="#">Cucumber</a></li>
    </ul>
</div>
<div id="fruit" class="menu">
   <ul>
        <li><a href="#">Apple</a></li>
        <li><a href="#">Pear</a></li>
        <li><a href="#">Banana</a></li>
        <li><a href="#">Kiwi</a></li>
    </ul>
</div>

＆＃13;

Answer 1

问题是您正在使用

#navcontainer ul li {
  display: inline;
}

在第一个例子中，你给每个li之间留一个空格。

第一个例子：

<ul class="nav">        <li><a href="#">beverages</a></li>        <li><a href="#">meats</a></li>        <li><a href="#">cheeses</a></li>        <li><a href="#">vegetables</a></li>        <li><a href="#">fruit</a></li>    </ul>

第二

<ul class="nav"><li><a href="#">meats</a></li><li><a href="#">beverages</a></li><li><a href="#">cheeses</a></li><li><a href="#">Vegetables</a></li><li><a href="#">fruit</a></li></ul>

你应该做

#navcontainer ul li {
  display: inline-block;
}

文本转换的奇怪问题

1 个答案: