Как я могу сделать событие click для внутреннего элемента кнопки & lt; & gt; тег работает? [Дубликат]

Поскольку P и некоторые другие теги не могут использоваться в теге BUTTON, лучшим обходным путем, как утверждают другие, является использование стилизованного тега SPAN.

В основном вы обрабатываете тег BUTTON "as если «это был контейнер DIV ваших тегов SPAN внутри. Таким образом, вы можете стилизовать всю кнопку, как хотите. В моем примере я стилизовал его с помощью имитированного значка, смоделированного тега заголовка, симулированного описания и симулированной кнопки внутри кнопки.

Я добавляю немного дополнительных стилей и форматирования для визуальных целей, но ваши могут быть такими же простой или сложный, как вы хотите.

STYLE:

    /* CSS Styling and classes example */

    /* style the main container */
    button { 
        background-color:transparent; 
        outline:none; 
        border:none; 
        cursor:pointer; 
        transition:0.2s; 
        padding:10px 15px; 
    }

    /* what happens when you hover - optional */
    button:hover { background-color:#efefef; }

    /* what happens when it's active - optional */
    button.active { background-color:#ccc; }

    /* global style for the contained span tags within */
    button span { 
        display:block; 
        margin:5px auto 10px; 
    }

    /* individually styling the inner span tags by class identifiers */
    button span.step { 
        background:#c33; 
        color:#fff; 
        padding:10px 2px 0 0; 
        font-size:1.75em; 
        font-weight:600; 
        width:40px; 
        height:40px; 
        border-radius:20px; 
    }
    button span.title { font-size:2em; font-weight:600; }
    button span.desc { font-size:1.05em; }
    button span.btn { 
        margin:20px auto; 
        padding:5px 10px; 
        background:#c33; 
        color:#fff; 
    }

HTML:

    <!-- html code -->
    <button class="customClass">
        <span class="step">1</span>
        <span class="title">Title</span>
        <span class="desc">My cool button description</span>
        <span class="btn">Click Here</span>
    </button>

Конечно, вы можете изменять, добавлять и удалите элементы диапазона, как вы сочтете нужным, включая изображения.

Как правило, вы не должны класть элементы блока внутри встроенных элементов.

В этой проблеме правильная версия Visual Studio верна: никакая спецификация HTML не позволяет p в button, даже довольно либеральное определение в HTML5 CR.

Однако браузеры на самом деле не применяют это ограничение (в том смысле, что они применяют, например, ограничение, которое span не может содержать p: они неявно закрывают открытый элемент span, когда видят тег <p>). Таким образом, ваш код «работает», хотя на самом деле нет гарантии, что он будет продолжать работать (или что он работает в всех браузерах).

Чтобы сделать код формально действительным, замените элемент p элементом span и стилем его. Вы также можете поставить перед ним тег <br />, чтобы обеспечить разрыв строки, даже когда CSS отключен. Чтобы установить верхнее поле на нем, сделайте его блоком или встроенным блоком. Пример:

.anotherClass {
  display: block;
  margin-top: 1em;
}

<button class="someClass">
    <img src="http://lorempixel.com/100/50" alt="Some text" /><br />
    <span class="anotherClass">Caption</span>
</button>