0

Здравствуйте.

Необходимо сделать полоску по ширина блока (как показано на скриншоте), но, почему-то, получается только по ширине текста/картинки.

alt text

CSS:

    .navbar {
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    height: auto;
    background-color: #fff;
    padding: 15px;
    width: 70px;
}
.navbar .home {
    width: 42px;
    height: 32px;
    background: url(images/nav-logo.png) no-repeat;
}
.navbar .dashboard {
    width: 24px;
    height: 22px;
    background: url(images/dashboard.png) no-repeat;
    margin: 0 auto;
}
.navbar li {
    border-top: 1px solid #e7e7e7;
    list-style-type: none;
    margin: 0 auto;
    padding-top: 30px;
}
.navbar li a {
    margin-left: -15px;
    color: #aaa;
    font-weight: bold;
}

HTML:

        <div class="navbar">
            <ul>
                <a href="#"><li class="home"></li></a>
                <li class="dashboard"><a href="#">Прокси</a></li>
            </ul>
        </div>

Результат:

alt text

Просьба, также, указать на ошибки верстки, если имеются. Спасибо.

1 ответ 1

4

Привет, у вас явная ошибка:

<a href="#"><li class="home"></li></a>

Нельзя <li> оборачивать в какой то тег, кроме <ul>.

Я бы сверстал так:

<nav>
    <a href="#">
        <img src="image/pic.png" alt="" />
        <p>Proxy</p>
    </a>
</nav>

При таких стилях:

nav {
    position: absolute;
    top: 20px; left: 20px;
    width: 150px;
    background: #fff;
    border-radius: 6px;
}

nav a {
    display: block;
    padding: 15px 0px 10px 0px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

nav a:last-child { border: 0; }

nav img {
    display: inline-block;
    width: 100px; height: 100px;
}

Фиддл: http://jsfiddle.net/Zjfyf/1/

1
  • @Олег Б, большое спасибо!
    – evansive
    19 ноя 2013 в 12:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.