Форум Сайтостроение Веб-строительство

Как сделать так, чтобы <li></li> распространялось только на ширину текста?

P
На сайте с 06.01.2009
Offline
601
postavkin
586

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

Ссылка для перехода указана в li (/straniza3) обрабатывается на ajax.

У стиля location стоит cursor:pointer;

Проблема - курсор поинтер появляется при наведении не только на контент внутри li, а ещё и справа от него, смотря сколько места отдано диву.

Перейти по ссылке можно нажав не только не только на контент внутри li, а ещё и справа от него, смотря сколько места отдано диву.

Как устранить проблему?


<div class="menulin5">
<ul>
<li class='location /straniza3'>кирпич</li>
<li class='location /straniza4'>бетон</li>
</ul>
</div>

из за большого кол-ва span (вариант ниже) отказался от такой реализации, где всё гут.


<div class="menulin5">
<ul>
<li><span class='location /straniza3'>кирпич</span></li>
<li><span class='location /straniza4'>бетон</span></li>
</ul>
</div>
L
На сайте с 16.10.2014
Offline
108
lexter
#1

а почему не присвоить клас к лишке ?

Купить автомобиль из США можно тут (https://us-car.com.ua)
P
На сайте с 06.01.2009
Offline
601
postavkin
#2
lexter:
а почему не присвоить клас к лишке ?

Вы пост прочитали? весь...

или я чего то не понимаю.

Z0
На сайте с 03.09.2009
Offline
827
ziliboba0213
#3

list-style-position: inside;
list-style-type: none;

Это для li класса location. Если я вас правильно понял 🍿

А, если справа, то:

display: table

L
На сайте с 16.10.2014
Offline
108
lexter
#4
postavkin:
Вы пост прочитали? весь...
или я чего то не понимаю.

во первых тут экстрасенсов вроде как нету .... если есть научите меня!!!

откуда мне знать что у вас там в стилях прописано ? может там ересь полная ?

выкладывайте всё что есть , будем смотреть

psics
На сайте с 02.04.2009
Offline
130
psics
#5
lexter:
во первых тут экстрасенсов вроде как нету .... если есть научите меня!!!
откуда мне знать что у вас там в стилях прописано ? может там ересь полная ?
выкладывайте всё что есть , будем смотреть

http://jsfiddle.net/ - тут удобно

L
На сайте с 16.10.2014
Offline
108
lexter
#6

у лишек по умолчанию отступы от них надо избавиться

Jor
На сайте с 23.06.2012
Offline
42
Jor
#7

Такой вариант

P
На сайте с 06.01.2009
Offline
601
postavkin
#8
lexter:
во первых тут экстрасенсов вроде как нету .... если есть научите меня!!!
откуда мне знать что у вас там в стилях прописано ? может там ересь полная ?
выкладывайте всё что есть , будем смотреть

Может и ересь. Я самоучка. Обидеть не хотел, думал Вы не увидели в первой записи что надо.

css 


li.location{cursor:pointer; text-decoration: underline;}

li.location:hover{text-decoration: none;}



.menulinks55{background:url(/img-osnovnye/lini.gif) top no-repeat; width:163px; height:auto; float:left; text-align:left;}

.menulinks55 .levoemenu155{text-align::center; padding: 15px 0 10px 35px; color:#956306; font-size:21px; font-family: Arial; font-weight:bold;} 

.menulinks55 ul {padding: 3px 0 15px 18px;}

.menulinks55 ul li{list-style-type:none; color:#800000; font-size:14px; font-family:Verdana;}

.menulinks55 li{padding: 2px 0 0 0;}

.menulinks55 li.bold{font-weight:bold;}

.menulinks55 li.location{color:#800000; font-weight:normal; font-size:14px; display: table;}

.menulinks55 li a {text-decoration: underline; color:#800000; font-weight:normal; font-size:14px;}

.menulinks55 li a:hover {text-decoration: none;}



.menulinks55 span.menu-material55{padding: 6px 0 0 13px; color:#CB0A1D; font-size:12px; text-transform:uppercase; font-family:Arial; font-weight:bold;} 

.menulinks55 span.menu-material55 a{text-decoration: underline; color:#CB0A1D;}

.menulinks55 span.menu-material55 a:hover{text-decoration: none; color:#CB0A1D;}

код 


<div class="menulinks55">

	<div class="levoemenu155">Россия</div>

	

		<span class="menu-material55"><a href="/keramog">гранит</a></span>

		<ul>

			<li class='location /burn'>Burn</li>

			<li class='location /cube'>Cube</li>

			<li class='bold'>kname</li>

			<li><a href="$kurl">kname</a></li>

		</ul>

				

		<span class="menu-material55"><a href="/keramichesk">плитка</a></span>

		<ul>				

			<li class='location /chance'>Chance</li>

			<li class='location /desire'>Desire</li>

		</ul>

		

		<ul>	

			<li><a href="/catalog.php">весь каталог</a></li>

		</ul>

	

	<div class="levoemenu155">Испания</div>

	

</div>


---------- Post added 18-02-2015 at 15:59 ----------

ziliboba0213:
list-style-position: inside;
list-style-type: none;


Это для li класса location. Если я вас правильно понял 🍿
А, если справа, то:
display: table

display: table = помогло.

поставил в строку css

li.loc{cursor:pointer; text-decoration: underline; display: table;}
Подскажите, плз, какя прога Копия сайта wordpress Показ div'a в случае
P
На сайте с 06.01.2009
Offline
601
postavkin
#9

Проблема - теперь не поставить квадратики в <li></li>

list-style-type:square;

не работает

art_moon
На сайте с 02.06.2012
Offline
45
art_moon
#10
postavkin:
Проблема - теперь не поставить квадратики в <li></li>
не работает

а через :before не устроят квадратики?

Верстка, натяжка на CMS /ru/forum/939565 (/ru/forum/939565)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий