Форма CSS как ссылка

Question

Форма CSS как ссылка

0

Я пытаюсь получить div с формой CSS, чтобы работать как ссылка.

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

Есть что-то, чего я не хватает?

JSFiddle: ссылка на форму CSS

Код HTML:

<div style="width: 0px; 
height: 0px; 
border-left: 7px solid transparent; 
border-right: 7px solid transparent; 
border-top: 12px solid #d1e8ff;
display: inline-block;
vertical-align: middle;">
   <a href=\"{0}\" style=\"display:block; height:13px; width:12px; align:\"></a>  
</div>

Были ли стили встроены так, что вам не нужно читать отдельные классы отдельно.

Alexander Matusiak 03 март 2014, в 21:52

Источник

0

Почему бы не применить все стили к самому себе?
Neograph734 03 март 2014, в 20:05

Теги:

html

css

4 ответа

4

Почему бы просто не использовать якорь без div

http://jsfiddle.net/H2J9a/5/

<a href="#" style="width: 0px; 
    height: 0px; 
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent; 
    border-top: 12px solid #d1e8ff;
    display: inline-block;
    vertical-align: middle;">
</a>

Huangism 03 март 2014, в 18:48

0

Ха! Это намного лучше. Полностью ускользнуло от меня.
Lokesh Suthar 03 март 2014, в 20:42

1

Вам не нужен div вообще

JsFiddle

CSS

a {
    display:block; 
    height:0px; 
    width:0px;
    border: 7px solid transparent; 
    border-top: 7px solid #d1e8ff;
}

Paulie_D 03 март 2014, в 17:43

0

Вы можете попробовать обернуть div с помощью <a></a> а не наоборот.

Вот скрипка

<a href="www.google.com" style="display:block; height:13px; width:12px; align:"><div style="width: 0px; 
    height: 0px; 
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent; 
    border-top: 12px solid #d1e8ff;
    display: inline-block;
    vertical-align: middle;">
</div>

   </a>

Lokesh Suthar 03 март 2014, в 17:22

0

Обратите внимание, что это создает «недопустимый» HTML в соответствии со стандартом W3C. Внутри якоря не может быть блочных элементов.
Neograph734 03 март 2014, в 20:04
3

Я думаю, что HTML5 позволяет такое поведение
Huangism 03 март 2014, в 20:05
0

Кажется, я держусь за старые стандарты, это действительно разрешено в HTML5. html5doctor.com/block-level-links-in-html-5
Neograph734 03 март 2014, в 20:09
0

Я не знал о предыдущих стандартах. Человек должен знать свою историю
Lokesh Suthar 03 март 2014, в 20:12

Показать ещё 2 комментария

Ещё вопросы

Почему бы не применить все стили к самому себе?
Ха! Это намного лучше. Полностью ускользнуло от меня.
Обратите внимание, что это создает «недопустимый» HTML в соответствии со стандартом W3C. Внутри якоря не может быть блочных элементов.
Я думаю, что HTML5 позволяет такое поведение
Кажется, я держусь за старые стандарты, это действительно разрешено в HTML5. html5doctor.com/block-level-links-in-html-5
Я не знал о предыдущих стандартах. Человек должен знать свою историю

Shomz · Accepted Answer · 2014-03-03T18-30-00.000Z

Сделайте это наоборот, якорь должен обернуть div: http://jsfiddle.net/H2J9a/2/

Кроме того, вам не нужно избегать кавычек.

В вашем случае границы нажимают якорь ниже div, поэтому вы можете либо попытаться сделать якорь абсолютно позиционированным, чтобы он плавал над div, либо поместил стили формы на сам якорь. См. Здесь: http://jsfiddle.net/H2J9a/6/.

Это пример якоря, имеющего стили формы (здесь нет необходимости в div, хотя я его сохранил):

<div style="">
    <a href="{0}" style="width: 0px; 
                         height: 0px; 
                         border-left: 7px solid transparent; 
                         border-right: 7px solid transparent;
                         border-top: 12px solid #d1e8ff;
                         display: inline-block;
                         vertical-align: middle;">
    </a>  
</div>

Я использовал код .NET для привязки тега, отсюда и побеги. Есть другие div до и после, поэтому я, вероятно, возьму этот, так как он лучше сочетается с синтаксическим потоком страницы.
Я так и думал, просто убедитесь, что их нет в выходном HTML. Да, у вас есть много вариантов, чтобы сделать эту работу.