Question

有我的问题：

宽屏的按钮与下图中的（1＆amp; 2）不同。
缩短Yearly，Monthly和Weekly之间的距离为（3）

请告诉我如何纠正这个问题。

enter image description here

Demo

HTML：

<!-- Make a menu with Yearly, Monthly and Weekly -->
<ul id="out_per_chart">
<li>
    <div class="yearly">
        <div class="title">2014</div>
        <div class="container1">
            <ul class="sub-menu1">
                <li class="year"><a class="_link" href="/Lists/ChartIndex.aspx?week=1&month=1&year=2014">Yearly</a>

                </li>
                <li>
                    <div class="monthly">
                         <div class="title">Monthly</div>
                        <div class="container2">
                            <ul class="sub-menu2"></ul>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="weekly">
                        <div class="title">Weekly</div>
                        <div class="container3">
                            <ul class="sub-menu3"></ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</li>
</ul>

CSS：

#out_per_chart li {
        list-style-type: none;
    }

    #out_per_chart .title {
        border: 2px solid #2676ac;
        padding: 10px 30px;
        width: 40px;
        color: #2676ac !important;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin-bottom: 10px;
        /* added */
    }

        #out_per_chart .title:hover {
            border: 2px solid #259add;
            cursor: default !important;
            background: #259add;
            color: #FFF !important;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            text-decoration: none !important;
        }

    .container1 {
        position: absolute;
        padding-left: -10px;
        padding-top: -5px;
        display: none;
    }

    .container2 {
        position: absolute;
        margin-top: -15px;
        margin-left: 50px;
    }

    .container3 {
        position: absolute;
        margin-top: -15px;
        margin-left: 50px;
    }

    ._link {
        text-decoration: none;
        border: 2px solid #2676ac;
        padding: 7px 20px 7px 20px;
        width: 30px;
        color: #2676ac !important;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

        ._link:hover {
            text-decoration: underline;
            cursor: pointer;
            border: 2px solid #259add;
            background: #259add;
            color: #FFF !important;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

    #out_per_chart li {
        width: 300px;
        height: 30px;
        margin-bottom: 25px;
    }

        #out_per_chart li.week_num, #out_per_chart li.month_num {
            margin-left: 60px;
            margin-top: -25px;
            margin-bottom: 25px;
        }

        #out_per_chart li.year {
            margin: 0 0 5px 0;
        }

Answer 1

您的HTML标记不一致，这不会让事情变得更容易。第一个列表项的菜单是：

<li>＆gt; <a>然后子列表元素具有：

<li>＆gt; <div>＆gt; <div>＆gt; <ul>

实现一致的嵌套列表/菜单的最简单方法是这样的：

<ul id="main-list">
    <li>Top level list item 1</a>
        <ul>
            <li>Second level list
                <ul>
                    <li>Third level list item</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Top level list item 2</a>
    <li>Top level list item 3</a>
</ul>

每个菜单都是父列表项的子项。这是 Fiddle example 的实际效果。它还解决了您遇到的宽度问题。

通过将小提琴示例中的<a>标记设置为块级别，您可以操纵宽度。默认情况下，<a>代码是内嵌元素，除非分配width，否则不会回复height和display:block属性。

如果绝对必须在某些列表项中有锚链接而在其他列表项中没有，那么您需要在父元素上设置宽度，在本例中为<li>

Answer 2

构建您的HTML
http://jsfiddle.net/ug8rU/
添加您的JS
http://jsfiddle.net/AywLf/
添加CSS
http://jsfiddle.net/9v7tC/

这是完整的代码：

<强> HTML

<ul class="record">
    <li class="main-year">
        <a href="#">2014</a>
        <ul class="main-menu">
            <li class="cat-menu yearly">
                <a href="#">Yearly</a>
            </li>
            <li class="cat-menu monthly">
                <a href="#">Monthly</a>
                <ul class="menu month-menu">
                    <li class=""><a href="#">Month 1</a></li>
                    <li class=""><a href="#">Month 2</a></li>
                    <li class=""><a href="#">Month 3</a></li>
                </ul>
            </li>
            <li class="cat-menu weekly">
                <a href="#">Weekly</a>
                <ul class="menu week-menu">
                    <li class=""><a href="#">Week 1</a></li>
                    <li class=""><a href="#">Week 2</a></li>
                    <li class=""><a href="#">Week 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<强> CSS

.record{
    width:300px;
}

.main-year{
    width:300px;
}

.menu{
    position:relative;
    left:60px;
    top:0px;
}


.menu{
    top:-25px;
    z-index:100;
}

.record li{
    list-style:none;
    height:25px;
    margin:1px 3px;
}

.record a{
    text-decoration:none;
    border:2px solid #2676ac;
    color: #2676ac !important;
    width:90px;
    padding:2px;
    display:block;
    text-align:center;
    border-radius:5px;
}

<强> JS

$(document).ready(function () {
    $('.main-menu').hide();
    $('.menu').hide();

    $(".main-year").hover(function () {
        $(this).children('.main-menu').show();
    },
    function () {
         $(this).children('.main-menu').hide();
    });

    $(".monthly").hover(function () {
        $(this).children('.month-menu').show();
    },
    function () {
        $(this).children('.month-menu').hide();
    });

    $(".weekly").hover(function () {
        $(this).children('.week-menu').show();
    },
    function () {
         $(this).children('.week-menu').hide();
    });
});

Answer 3

为每个框提供一个课程，并在您的CSS中添加.class{width:"70px";margin-top:"3px";}。你可以给出一个百分比，而不是在px中给出它

Answer 4

.title
{
   width: 80px;
   text-align: center;
}

问题解决了。如果文字没有在顶部和底部之间对齐，则可以

padding-top: 10px;
padding-bottom: 10px;

现在您可以在中心看到您的文字。抱歉英文不好。

Answer 5

// ok test you this css code

#out_per_chart li {
list-style-type: none;
}

#out_per_chart .title {
    border: 2px solid #2676AC;
    border-radius: 5px;
    color: #2676AC !important;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 100px;
}

#out_per_chart .title:hover,
#out_per_chart li a:hover {
    border: 2px solid #259add;
    cursor: default !important;
    background: #259add;
    color: #FFF !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-decoration: none !important;
}
.sub-menu1{
    padding:0;
    margin:0;
}
.sub-menu1 li > a{
    border: 2px solid #2676AC;
    border-radius: 5px;
    color: #2676AC !important;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 100px;
    display:block;
}

.container1 {
    position: absolute;
    padding-left: -10px;
    padding-top: -5px;
    display: none;
    top:60px;
}

.container2 {
    left: 45px;
    position: absolute;
    top: 43px;
}

.container3 {
    position: absolute;
}

._link {
    text-decoration: none;
    border: 2px solid #2676ac;
    color: #2676ac !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

._link:hover {
    text-decoration: underline;
    cursor: pointer;
    border: 2px solid #259add;
    background: #259add;
    color: #FFF !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#out_per_chart li.week_num, #out_per_chart li.month_num {
    margin-left: 60px;
}

如何使用CSS设置按钮的宽度和文本对齐方式

5 个答案: