Кнопки списка стилей - PullRequest
Новая
       18

Кнопки списка стилей

1 голос
/ 05 июля 2011

Используя список, я хочу создать список ссылок, как на изображении

HTML List with CSS background images

<div id="toolbarbottom" class="toolbar" style="position: fixed; clear: both; overflow: visible; bottom: 0px; left: 0px; width: 100%;">
     <ul>
         <li id="active"><span><a id="current" href="#add" class="button">News</a></span></li>
         <li><span> <a href="#Updates" class="button">Updates</a></span> </li>
         <li><span><a href="#Contact" class="button">Contact Us</a></span></li>
         <li><span><a href="#Website" class="button">Website</a> </span></li>
         <li><span><a href="#Refresh" id="#Refresh" class="button">Refresh</a></span> </li>
     </ul>
</div>

Я застрял на CSS (кнопка) и, возможно,расстояние между элементами списка.чтобы список появился в этой форме.Кто-нибудь с идеей, как я могу справиться с этим, пожалуйста?

Ответы [ 3 ]

4 голосов
/ 05 июля 2011

или другой способ - использовать числа с плавающей запятой и заставить ul display: inline-block содержать плавающие li х

.

вам нужно немного изменить HTML-код, чтобы span находился внутри a - это позволяет скрыть растянутый текст, но сохранить фон изображения и интерактивную область для элементов a, также я d дать каждой ссылке уникальную ссылку (класс или идентификатор), чтобы фоны можно было применять отдельно.

пример HTML: 

<div id="toolbarbottom" class="toolbar" style="position: fixed; top: 0px; left: 0px; width: 100%;">
     <ul>
         <li class="active"><a href="#add" id="madd"><span>News</span></a></li>
         <li><a href="#Updates" id="mupdates"><span> Updates</span></a></li>
         <li><a href="#Contact" id="mcontact"><span>Contact Us</span></a></li>
         <li><a href="#Website" id="mwebsite"><span>Website </span></a></li>
         <li><a href="#Refresh" id="mrefresh"><span>Refresh</span></a> </li>
     </ul>
</div>

затем вы можете поместить весь фон в ul и поместить отдельные изображения в каждую ссылку. 

#toolbarbottom ul {
   list-style: none; 
   margin: 0; 
   padding: 0; 
   display: inline-block; 
   width: 100%; 
   background: #ff0;
}

#toolbarbottom li {
   float: left; 
   width: 80px; 
   height: 80px; 
   border: 1px solid #000; /* not required, just to show where individual links are */
} 

#toolbarbottom li a { /* make link fill the li element */
   display: block; 
   height: 80px; 
}

#toolbarbottom li span { /* hide the text */
   position: absolute;
   clip: rect(1px, 1px, 1px, 1px);
   clip: rect (1px 1px 1px 1px);
}

/* couple examples of where to put individual backgrounds */   
#toolbarbottom #mupdates {background: #dad;}
#toolbarbottom #mcontact {background: #0f0;}
2 голосов
/ 05 июля 2011

скрипка: http://jsfiddle.net/YaS9J/

CSS 

#toolbarbottom li {
    display:inline-block;
    padding:0 10px;  
}

/* if you have one */
#toolbarbottom li img {
    display:block;   
}
2 голосов
/ 05 июля 2011

Сначала вы должны настроить CSS как внешнюю таблицу стилей, а не жестко закодировать ее в свой HTML.(Подробнее см. http://www.w3.org/TR/html4/present/styles.html).Чтобы добавить интервал между элементами li, вы можете использовать каскад css для добавления некоторого нижнего отступа следующим образом: 

#toolbarbottom ul li {
    padding-bottom:4px;
}

Чтобы сделать список встроенным, вы должны использовать: 

#toolbarbottom ul{
    list-style: none;
    display: inline;
    padding-left: 0;
    margin-left: 0;
}

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

<li><a href="example.com"><img src="/path/to/image.jpg"></a></li>
...