ul li формы и текст

Question

ul li формы и текст

0

У меня есть некоторые проблемы с моим списком форм - возможно, я приближаюсь к нему неправильно? Мне нужно несколько указателей на то, чего я хочу достичь.

Моя скрипка

CSS:

#circle { 
   height: 120px;
    width: 120px;
    border-radius: 60px;
   background: #3B5163; 
   -moz-border-radius: 60px; 
   -webkit-border-radius: 60px; 
}

#tablet{
    width: 295px;
    height: 354px; 
    background: #3B5163; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}

HTML:

<div style="width: 1000px; margin: 0 auto; padding: 0 0 0 0;">



<ul>

<li style="display:inline;"><div id="circle" style="float:left;"></div></li>

<li style="display:inline;"><div id="circle" style="float:left;margin:  0 25px 0 25px;""></div></li>

<li style="display:inline;"><div id="tablet" style="float:left; margin:  -100px 25px 0 25px;"></div></li>

<li style="display:inline;"><div id="circle" style="float:left;margin:  0 25px 0 25px;""></div></li>

<li style="display:inline;"><div id="circle" style="float:left;"></div></li>

</ul>



</div>

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

user3435159 26 март 2014, в 13:39

Источник

Теги:

html

css

html-lists

2 ответа

1

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

#circle { 
   height: auto;
    width: auto;
    border-radius: 50%;
   background: #3B5163; 
   -moz-border-radius: 50%; 
   -webkit-border-radius: 50%; 
}

#tablet{
    width: auto;
    height: auto; 
    background: #3B5163; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}

Кроме того, лучше использовать display: block, а затем float: left. Исправьте меня, если я ошибаюсь. Таким образом, css видит объекты как блоки, а с помощью "float:" вы можете указать, что эти поля складываются влево или вправо. (если вы не определяете float, по умолчанию они будут складываться под друг другом). Кроме того, вы можете попробовать использовать метод абсолютного позиционирования.

YVbakker 26 март 2014, в 09:08

Ещё вопросы

Shailender Arora · Accepted Answer · 2014-03-26T09-48-00.000Z

эй, я думаю, ты выглядишь так: - http://jsfiddle.net/29NF3/2/

add this css

#circle { 
   height: 120px;
    width: 120px;
    border-radius: 60px;
   background: #3B5163; 
   -moz-border-radius: 60px; 
   -webkit-border-radius: 60px; 
}
#circle span {
    clear: both;
    display: block;
    text-align: center;
    vertical-align: middle;
}
#tablet{
    width: 295px;
    height: 354px; 
    background: #3B5163; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}
.text {

    display: block;
    text-align: center;

}

Обновлено DEMO: - http://jsfiddle.net/29NF3/5/

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