#css #html
#css #HTML
Вопрос:
Сейчас я работаю над страницей, на которой в рамках установлены текстовые блоки, а текст внутри них оформлен.
По сути, основная проблема, с которой я сталкиваюсь, заключается в том, что в <p> теге styled, содержащем стиль границы, когда я пытаюсь разбить текст на другой абзац, текст после </p> перехода выходит за пределы рамки. Я пробовал добавлять <p> во всевозможные разные места, но это просто не будет делать то, что я хочу, и я не могу найти никаких руководств о том, как добавить дополнительные пункты в абзац, оформленный рамкой. Пример кода ниже … это поле было простым, потому что в нем всего один короткий абзац. Остальная часть страницы содержит несколько абзацев, которые все должны попадать в рамку.
Кто-нибудь может помочь?
<p style="border: solid 3px #4D545E; padding: 6px;">
<strong style="color: #c01d21;">Book your Christmas party</strong>
on any Monday-Thursday in November – and all your guests will receive a complimentary Sorbete al Cava cocktail.
<br>
<a style="text-transform: uppercase;line-height: 38px;text-align: center; " class="link" href="http://www.manchesterconfidential.co.uk/b.aspx?b=6980" target="_blank">
<strong>Click to book a table</strong>
</a>
Or call <strong>#### ### ####</strong>
</p>
Комментарии:
1. Привет, вы не можете добавить <p> тег внутри <p> . Это плохая практика. Еще вы можете добавить span или другой элемент и сделать его блокирующим.
2. Не могли бы вы добавить пример jsfiddle, который иллюстрирует вашу проблему?
Ответ №1:
Если я понимаю, о чем вы говорите, я привел для вас здесь фрагмент кода, чтобы вы могли его проверить, если он соответствует тому, что вы хотите, вы можете использовать его или попытаться объяснить больше о том, что вы хотите.
.wrapper{
border: solid 3px #4D545E; padding: 6px;
}
.center{
text-align:center;
} <div class="wrapper">
<p><strong style="color: #c01d21;">Book your Christmas party</strong> on any Monday-Thursday in November – and all your guests will receive a complimentary Sorbete al Cava cocktail.</p>
<p class="center">
<a style="text-transform: uppercase;line-height: 38px;text-align: center; "class="link" href="http://www.manchesterconfidential.co.uk/b.aspx?b=6980" target="_blank"><strong>Click to book a table</strong></a></p>
<P class="center">
Or call <strong>#### ### ####</strong></p>
</div> Комментарии:
1. Могу ли я добавить изображения сюда?
2. Да, вы можете добавлять изображения na.
Ответ №2:
следуя приведенному выше ответу Джерри, добавить несколько абзацев должно быть так же просто, как добавить <p> теги (при условии, что это то, что вы ищете).
с точки зрения кода это будет (отработка решения Джерри)
.wrapper{
border: solid 3px #4D545E; padding: 6px;
}
.center{
text-align:center;
}
strong {
color: #c01d21;
}
a {
text-transform: uppercase;
line-height: 38px;
text-algin: center;
}
Я перенес все ваши стили в CSS. И html будет (таким же, как указано выше) more <p> или любым другим тегом, который вы решите добавить.
<div class="wrapper">
<p><strong>Book your Christmas party</strong> on any Monday-Thursday in November – and all your guests will receive a complimentary Sorbete al Cava cocktail.</p>
<p class="center">
<a class="link" href="http://www.manchesterconfidential.co.uk/b.aspx?b=6980" target="_blank"><strong>Click to book a table</strong></a></p>
<P class="center">Or call <strong>#### ### ####</strong></p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<p class="center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
Надеюсь, это поможет.
Комментарии:
1. Я все еще действительно борюсь. Я изменил код в соответствии со справкой, которая была опубликована вчера, но теперь серая рамка вокруг каждого блока текста не отображается…
2. И я не могу опубликовать здесь весь код страницы — он говорит, что он слишком длинный
3. @MikeB — не показывая, вы имеете в виду, что граница исчезла? И можете ли вы опубликовать часть того, как выглядит ваш код сейчас? Не вся страница, а только часть CSS и HTML, это может дать нам лучшую идею. — Извините за поздний ответ.
Ответ №3:
p.one {
border-style: solid;
border-width: 5px;
}
<p class="one">Some text.</p>
Ответ №4:
Извините, ребята, я действительно против этого, и у меня не всегда есть возможность вернуться и ответить. В данный момент здесь находится стажер, который может ответить на некоторые из моих вопросов по HTML, но спасибо всем за ваш вклад. Без сомнения, у меня скоро появятся новые вопросы … 🙂