2013-07-14 4 views
3

Привет, у меня есть код здесь, который идеально подходит, кроме одного. Между каждой кнопкой в ​​коде нет пробела. Я попробовал маржу, но, к сожалению, ее неупорядоченный список, поэтому я немного смущен. Что бы я добавил или заменил, чтобы иметь место между двумя кнопками. Помогите?? :(Добавление пространства между кнопками?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
</head> 

<style type="text/css"> 

    .rollovericons a#terms{ 
     display: block; 
     width:138px; 
     height:27px; 
     background: url(http://icpy.webs.com/button/Terms.png) no-repeat; 
    } 

    .rollovericons a:hover#terms{ 
     background: url(http://icpy.webs.com/button/Terms0.png) no-repeat; 
    } 
    .rollovericons a#contact{ 
     display: block; 
     width:138px; 
     height:27px; 
     background: url(http://icpy.webs.com/button/contact.png) no-repeat; 
    } 

    .rollovericons a:hover#contact{ 
     background: url(http://icpy.webs.com/button/contact0.png) no-repeat; 
    } 

</style> 

<body> 

<div class="rollovericons"> 
    <a href="http://www.twitter.com" id="terms"></a> 
    <a href="http://www.twitter.com" id="contact"></a> 
</div> 

</body> 
+0

Ваш HTML не содержит неупорядоченный список. Я не думаю, что вы попробовали установить маржу или отступы. – lifetimes

+0

Просто добавьте правило «margin-right» к первому стилю кнопки или «margin-left» ко второму. – raina77ow

+0

Привет, Джордж, попробуйте использовать « » между кнопками. – linhadiretalipe

ответ

11

Вобще:.

.rollovericons a{ 
    margin: 10px; 
} 

Это добавит запас для каждого <a> элемента внутри rollovericons класса

+0

СПАСИБО !!!!!!!!!! И жаль, что все это не было ul -facepalm- – raininggalaxies

+0

Если мой ответ решил вашу проблему, отвечая на ваш вопрос, вы можете отметить его как принятый (; –

0

Попробуйте это:

#rollovericons ul li { 
display: inline; 
list-style-type: none; 
padding-right: 7px; 
} 

<div class="rollovericons"> 
<ul> 
<li><a href="http://www.twitter.com" id="terms"></a></li> 
<li><a href="http://www.twitter.com" id="contact"></a></li> 
</ul> 
</div> 
1

Я добавил класс, называемый пространством, который добавит пробел между кнопками.

Херес jsfiddle для вас, чтобы увидеть: http://jsfiddle.net/mFfAX/

.space {margin-bottom:15px} 
Смежные вопросы