Проблема должна быть во второй строке:
myDiv.style.cssText("position:absolute;z-index:999");
cssText
не является функцией, а является свойством. Так называйте это следующим образом:
myDiv.style.cssText = "position:absolute;z-index:999";
или (лучший подход, на мой взгляд, потому что он ясен):
myDiv.style.position = 'absolute';
myDiv.style.zIndex = 999;
Правильно, это недопустимо, потому что:
button
- это фразинг-контент (с отсутствующим потоком интерактивного контента ). p
можно использовать только там, где ожидается поток потока . Альтернатива избавляет от элемента p
и вместо этого использует элемент span
с display: block
:
.anotherClass {
display: block;
}
<button class="someClass">
<img ... />
<span class="anotherClass">Caption</span>
</button>
Поскольку 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>
span
, проблема в том, чтоmargin-top
не применяется к встроенным элементам. Затем просто создайте его как блок. – Oriol 23 September 2014 в 19:51