На неупорядоченный список влияет таинственное форматирование - PullRequest
1 голос
/ 30 декабря 2011

Я чувствую, что схожу с ума здесь. Я отодвинул слой CSS за слоем до минимума, и список по-прежнему отображается так, как будто обертка имеет около 50 пикселей отступа слева. Я использую некоторые jQery здесь, но я не понимаю, как это повлияет на список и соответствующее размещение div, как оно есть. Если кто-то может определить виновника, я был бы очень признателен. Я включил только один элемент списка в код ниже. Они все идентичны.

Страница находится здесь: http://www.tpan.com/testing/custom.html

Javascript здесь:

$(document).ready(function() {
    function addDrop() {
        $(this).addClass("hovering");
        $(this).siblings().fadeTo("fast", 0.3);
        $(this).fadeTo("slow", 1.0);
    };

    function removeDrop() {
        $(this).removeClass("hovering");
        $(this).fadeTo("fast", 1.0);
    };

    var dropConfig = {
        interval: 500,
        sensitivity: 4,
        over: addDrop,
        timeout: 500,
        out: removeDrop,
    };

    $("li.drop").hoverIntent(dropConfig);
});

css здесь:

body {
    margin:0px;
}
#wrapper {
    width:1000px;
    margin-right:auto;
    margin-left:auto;
    border:1px dotted #999;
    height:800px;
}
#menu li {
    display:inline;
    border:1px solid #000;
    padding-right:20px;
    padding-left:20px;
}
#menu li a {
    font-size:12px;
    color:#666;
    text-decoration:none;
    font-weight:lighter;
    font-family:arial;
}
#menu div {
    display:none;
}
#menu li.drop div {
    width:600px;
    position:absolute;
    background-color:#666;
    left:auto;
}
#menu li.hovering div {
    display:block;
}
#menu h2,ul#menu h3 {
    font-size:12px;
    font-weight:lighter;
}
#menu ul {
    width:800px;
    position: relative;
}

HTML здесь:

<div id="wrapper">
    <div id="dropMenu">
        <ul id="menu">
            <li class="drop">
                <a class="droplink" href="#">Home</a>
                <div class="dropContainer">
                    <h3> 1 </h3>
                    <p>
                        <a href="#">Shirts</a>, <a href="#">T-shirts</a>, <a href="#">Accessories</a>, <a href="#">More...</a>
                    </p>
                    <h3> Gifts </h3>
                    <p>
                        <a href="#">Sporting goods</a>, <a href="#">Gadgets</a>, <a href="#">More...</a>
                    </p>
                    <h3> Clearance! </h3>
                    <p>
                         40% off all photo accessories this weekend only. <a href="#">Don't miss out!</a>
                    </p>
                    <a href="#" class="more"> More stuff for him...</a>
                </div>
            </li>
        </ul>
    </div>
</div>

Я часами ходил снова и снова. Еще раз спасибо.

Ответы [ 2 ]

1 голос
/ 30 декабря 2011

CSS ...

ul#menu { margin:0; padding:0; }

Пробел берется из поля по умолчанию, которое есть у каждого неупорядоченного списка. Вы должны удалить это.

0 голосов
/ 30 декабря 2011

это, вероятно, хорошая идея использовать сброс CSS перед запуском любого кода и css - https://stackoverflow.com/questions/116754/best-css-reset. Мне кажется, что вашему главному div "menu" нужен атрибут padding 0, чтобы удалить 40 пикселей на левый.

...