Добавить фоновое изображение к элементам списка

Question

Добавить фоновое изображение к элементам списка

0

Я хотел бы добавить изображение кнопки в качестве фона для элементов списка. Здесь элементы списка должны быть горизонтальными, и каждый элемент списка не должен иметь промежутка между ними.

<nav class="clearfix"><!-- START 'nav' -->
      <h2 class="slide-trigger">Menu <span></span></h2>
      <ul class="navigation clearfix">
        <li class="current"><a href="#">HOME</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">GALLERY</a></li>
      </ul>    
      <!--a href="#" id="pull">Menu</a-->
    </nav>

Стиль:

nav li {float: left; list-style: none; font-size:13px;
background-image:url("http://s17.postimg.org/8y5rvkw3v/menu_bg.jpg");
background-repeat: no-repeat;

Anand 16 апр. 2014, в 21:26

Источник

Теги:

html

css

2 ответа

0

Я не совсем уверен, понимаю ли я ваш вопрос. Но мне кажется, как будто все уже работает красиво. Вам просто нужно указать свои элементы списка шириной и высотой и... эй престо.

width: 154px;
height: 32px;

Хорошо, теперь вам все равно придется корректировать прописку, ширину и высоту соответственно, но вы получите эту идею.

maak. 16 апр. 2014, в 17:19

Ещё вопросы

arocketman · Accepted Answer · 2014-04-16T16-21-00.000Z

Если то, что вы хотите достичь, это такое меню, я бы советовал делать это без какого-либо фонового изображения, но используя только фоновый цвет и радиус границы, я создал jsfiddle:

http://jsfiddle.net/xMZRT/

nav li {
    float: left; list-style: none; font-size:13px;
    background-color: #e3e3e3;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius:10px;
    padding:5px;
    margin-right:5px;
}

если вы хотите удалить этот пробел, просто удалите свойство margin-right, которое я добавил.

IE 9.0> должен поддерживать это просто отлично. Для получения дополнительной информации вы можете обратиться к этому: caniuse.com/#feat=border-radius