Добавить тег в середине строки

362

25 февраля 2017, 03:46

Здравствуйте! Может быть это тупой вопрос, но все же. У меня есть div, в нем ul там li и внем p. Так как я делаю адаптивный сайт, мне свойство css p {max-width: 100%} не помогает, текст все равно вылазит за пределы экрана. Так вот я хочу с помощью jQuery добавить в середину строки тег br. Как это реализовать? Вот структура:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
html {width: 100%;} 
html:lang(en) {quotes: "\201C" "\201D";} 
* {font-family: Arial, Myriad Pro, PT Sans ,Tahoma, Times New Roman,  sams-serif; hyphens: auto;} 
body {background-color: blueviolet; background-repeat: no-repeat;    background: radial-gradient(ellipse 95% 95%, #8B30A1,#74229A, blueviolet); margin: 0; padding: 0; background-position: center;} 
button {cursor: pointer;} 
body {hyphens: auto;} 
button:focus {border: 0} 
div.block3 p {display: inline; margin: 0; color: #E2DDDD; font-size: 0.96em; padding: 0}  
div.block3 {margin: 0px 6px 0px 25px;} 
div.block3 img {width: 70px; height: 70px; margin: 9px 0px 0px -3px;} 
div.block3 ul {margin: -35px 0px 40px 55px; color: #D5D3D3;} 
 
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { 
div.block3 {width: 100%; margin: 0;} 
div.block3 img {width: 96px; height: 96px; display: block; margin: 10px auto;} 
div.block3 ul {margin: 10px 0px 30px -22px; width: 100%;} 
} 
</style> 
<meta charset="UTF-8"/> 
</head> 
<body> 
<div class="block3"> 
<img src="media/images/Twittlogo.jpg" alt="Twitterlogo"/> 
<ul> 
	<li><p>Go this link (<a href="https://twitter.com/RayEugen" target="_blank">https://twitter.com/RayEugen</a>).</p></li> 
</ul>	 
</div> 
</body> 
</html>

Потому, что выходит вот так (края блока это конец экрана смартфона):

Answer 1

Во всем виноват отрицательный margin-left. Более-менее приемлемый вариант - добавить следующие стили:

iv.block3 ul {
    margin: 10px 0px 30px 0;
    padding: 0;
}
iv.block3 li {
    padding: 0 20px;
}

Answer 2

Обнулите отступы для списков, нечего придумывать костыли:

ul, ol, menu {
    margin: 0;
    padding: 0;
    -moz-padding: 0;
    -webkit-padding: 0;
    list-style: none;
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Bootstrap 3. Помогите разобраться с колонками

355

HTML

Шаблон сайта на node.js

Подскажите, как шаблон сайта (html+css с картинками) натянуть на node+express ? Порекомендуйте инструкцию, туториал

805

HTML

Как спарсить html код который весь в тексте без тегов?

Как спарсить данный текст таким образом чтобы получить не Категория: а сам текст

323

HTML

Появляется пробел в конце кода php

Ситуация следующая: при вставке кода для смены сцветовой гаммы на странице WordPress в конце появляется пустой символВот как это выглядит: [![Отладчик...

370