Отступ между текстом и знаком списка

283
26 декабря 2017, 15:15

Нужно уменьшить отступ между знаком списка и текстом, а так же пофиксить ширину средней ячейки и отступ второй картинки убрать

Результат

Ожидания

th { 
  color: white; 
  text-align: center; 
  background-color: #9a99ff; 
  height: 60px; 
} 
 
table { 
  width: 550px; 
  margin: 0 auto; 
} 
 
.tomsk { 
  width: 40px; 
  height: 40px; 
} 
 
.fiol { 
  background-color: #93f; 
} 
 
img { 
  margin: 0 auto; 
} 
 
.cvet { 
  background-color: #9a99ff; 
} 
 
p { 
  text-align: center; 
  font-size: 12px; 
} 
 
.left { 
  float: left; 
  width: 228px; 
  color: white; 
  width: 235px; 
  padding: 0 10px; 
  font-size: 12px; 
  text-align: justify; 
  text-indent: 20px; 
} 
 
.razm { 
  width: 250px; 
} 
 
.right { 
  float: right; 
  color: white; 
  width: 228px; 
  padding: 0 10px; 
  text-align: justify; 
  font-size: 12px; 
  text-indent: 20px; 
  width: 230px; 
} 
 
h2 { 
  margin: 0; 
} 
 
ul { 
  color: white; 
  padding-left: 25px; 
} 
 
#q { 
  padding: 0 5px; 
} 
 
#l { 
  padding-left: 5px; 
  padding-right: 20px; 
  padding-bottom: 20px; 
} 
 
#r { 
  padding-right: 5px; 
  padding-left: 20px; 
  padding-bottom: 20px; 
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
  <meta name="generator" content="PSPad editor, www.pspad.com"> 
  <title>Лаба 1</title> 
  <link rel="stylesheet" type="text/css" href="laba1.css"> 
</head> 
 
<body> 
  <table border="1"> 
    <tr class=""> 
      <th colspan="3"><img class="tomsk" src="tomsk1.gif" alt=""> 
        <br clear="all"> 
        <h2>ВУЗы Томска</h2> 
      </th> 
    </tr> 
    <tr class="fiol"> 
      <td class="razm"><img id="q" src="tgu.jpg" alt=""></td> 
      <td class="razm"> 
        <ul> 
          <li> 
            <p class="p">Томский государственный университет</p> 
          </li> 
          <li> 
            <p class="p">Томский университет систем управления и радиоэлектроники</p> 
          </li> 
        </ul> 
      </td> 
      <td class="razm"><img id="q" src="tusur.jpg" alt=""></td> 
    </tr> 
    <tr class="cvet"> 
      <td class="razm" colspan="3"> 
        <span class="left">По концентрации научно-преподавательских кадров высшей квалификации и по количеству студентов на тысячу жителей Томск традиционно занимает первое место в России</span> 
        <span class="right">В томских вузах работает 5,5 тысяч преподавателей, среди которых 580 докторов наук и профессоров и 2,5 тысяч кандидатов наук и доцентов, и обучается 66,4 тыс. студентов</span></td> 
    </tr> 
    <tr class="fiol"> 
      <td class="razm"><img id="l" src="tpu.jpg" alt=""></td> 
      <td class="razm"> 
        <ul> 
          <li> 
            <p class="p">Томский политехнический университет</p> 
          </li> 
          <li> 
            <p class="p">Сибирский меди-цинский университет</p> 
          </li> 
        </ul> 
      </td> 
      <td class="razm"><img id="r" src="med.jpg" alt=""></td> 
    </tr> 
  </table> 
</body> 
 
</html>

Answer 1

Надо добавить в стили

.razm {
    min-width: 250px;
    text-align: center;
}

Это пофиксит средний столбик и отступ второй картинки.

А положение маркера можно поменять задавая элементу span

<li>
   <p class="p marker1">Томский университет систем управления и радиоэлектроники</p>
</li>

свойство margin-left с отрицательным значением,

.marker1
    margin-left: -15px;
READ ALSO
Проблема в верстке мобильный браузер [требует правки]
CSS

Проблема в верстке мобильный браузер [требует правки]

почему на мобильных браузерах стиль min-width не работает кроме chrome android:

 181
Как сделать эффект тиснения на CSS?
CSS

Как сделать эффект тиснения на CSS?

Текст в Photoshop сделан с эффектом тиснения, как это сделать на CSS?

 563
Верстка квадратных блоков в boottrap
CSS

Верстка квадратных блоков в boottrap

Представьте страницу, на которой размещён какой-то текст, а справа завёрстаны квадратные обложки альбомовПример, который нашёл в сети:

 261
Написание блога [требует правки]
CSS

Написание блога [требует правки]

Здравствуйте, недавно начал писать сайт, пока только на htmlПодскажите пожалуйста, какой код или теги нужны, чтобы можно было выкладывать контент,...

 234