Позиция не правильная html или css

206

23 сентября 2019, 16:10

всем привет сделал форму и таблицу теперь не могу разобраться:

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

собственно код и сама страничка :

<?php 
	include($_SERVER['DOCUMENT_ROOT'].'/Work_Log/main.php'); 
	include('\Work_Log\include\content.php'); 
	{ 
?> 
 
<!DOCTYPE html> 
<html> 
 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>Work_Log - Журнал регистрации поступивших в архив дел</title> 
  <?php getHead(); ?> 
</head> 
 
<head> 
  <div class='content'> 
    <h3>Регистрации поступивших в архив дел</h3> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <div class='block' style=' max-height:500px; overflow-y:scroll' ;> 
</head> 
<form method="post" action='action/?method=addjournal1'> 
  <span class="label"> Дата поступления </span> 
  <input style="width: 10%;" type="date" class="input" name="date_start"> 
  <span class="label"> Наименование дел </span> 
  <input style="width: 10%;" type="text" class="input" name="named"> 
  <span class="label"> Номер по архиву </span> 
  <input style="width: 10%;" type="text" class="input" name="narchive"> 
  <span class="label"> Номер по номенклатуре дел </span> 
  <input style="width: 10%;" type="text" class="input" name="nomenkl"> 
  <span class="label"> Количество листов в описи </span> 
  <input style="width: 10%;" type="text" class="input" name="sopis"> 
  <span class="label"> Количество листов в деле </span> 
  <input style="width: 10%;" type="text" class="input" name="scase"> 
  <span class="label">Срок окончание хранения </span> 
  <input style="width: 10%;" type="date" class="input" name="date_end"> 
  <span class="label">Подписи принимающего</span> 
  <input style="width: 15%;" class="input" name="rsign"> 
  <span class="label">Подписи сдающего </span> 
  <input style="width: 15%;" class="input" name="rover"> 
  <span class="label">Отметка об уничтожении </span> 
  <input style="width: 15%;" class="input" name="destroy"> 
  <br/> 
  <br /><input type="submit" name="add" value="Добавить" /><br /> 
  <br /> 
</form> 
</div> 
 
<body> 
  <div class=log> 
    <?php getlog(); ?> 
  </div> 
  <?php getMenu(); ?> 
  <html> 
 
  </html> 
  <div class='content'> 
    <h1>Журнал регистрации поступивших в архив дел</h1> 
    <div class='block' style=' max-height:500px; overflow-y:scroll' ;> 
      <table cellspacing="0" cellpadding="10" width="100%"> 
        <tbody> 
          <tr> 
            <td rowspan="2"><b> №п\п </b></td> 
            <td rowspan="2"><b> Дата поступление в архив </b></td> 
            <td rowspan="2"><b> Наименование дел </b></td> 
            <td colspan="2"><b> Номер </b></td> 
            <td colspan="2"><b> Количество листов </b></td> 
            <td rowspan="2"><b> Срок окончания хранения </b></td> 
            <td colspan="2"><b> Подписи ответственных лиц </b></td> 
            <td rowspan="2"><b> Отметка об уничтожении </b></td> 
          </tr> 
          <tr> 
            <td><b>по архиву</b></td> 
            <td><b>по номенклатуре дел</b></td> 
            <td><b>в описи</b></td> 
            <td><b>в деле</b></td> 
            <td><b>принимающего </b></td> 
            <td><b>сдающего</b></td> 
          </tr> 
          <?php 	 
	getConect(); 
	mysql_query("SET NAMES utf8"); 
	$i=1; 
	$query = mysql_query('SELECT * FROM `journal1`'); 
	while($row = mysql_fetch_array($query) ) 
	{ 
		echo "<tr><td>".$i."</td>"; 
		echo "<td>".$row['date_start']."</td>"; 
		echo "<td>".$row['named']."</td>"; 
		echo "<td>".$row['narchive']."</td>"; 
		echo "<td>".$row['nomenkl']."</td>"; 
		echo "<td>".$row['sopis']."</td>"; 
		echo "<td>".$row['scase']."</td>"; 
		echo "<td>".$row['date_end']."</td>"; 
		echo "<td>".$row['rsign']."</td>"; 
		echo "<td>".$row['rover']."</td>"; 
		echo "<td>".$row['destroy']."</td></tr>"; 
		$i++; 
	} 
	?> 
 
        </tbody> 
      </table> 
    </div> 
  </div> 
</body> 
 
</html> 
 
<?php 
	} 
	?>

простите если код ужасный я новичок

Answer 1

  display: block;

Если я правильно понял их картинки, или вы хотите чтобы выглядела как таблица?

*{ 
  box-sizing: border-box 
} 
 
input { 
  display: block; 
} 
 
table { 
  border-collapse: collapse; 
} 
 
table input{ 
  width: 100%; 
  border: none; 
  padding: 2px; 
} 
 
td { 
  border: 1px solid grey; 
} 
 
.no-padding td{ 
  padding: 0 
}

<form method="post" action='action/?method=addjournal1'> 
  <span class="label"> Дата поступления </span> 
  <input type="date" class="input" name="date_start"> 
  <span class="label"> Наименование дел </span> 
  <input type="text" class="input" name="named"> 
  <span class="label"> Номер по архиву </span> 
  <input type="text" class="input" name="narchive"> 
  <span class="label"> Номер по номенклатуре дел </span> 
  <input type="text" class="input" name="nomenkl"> 
  <span class="label"> Количество листов в описи </span> 
  <input type="text" class="input" name="sopis"> 
  <span class="label"> Количество листов в деле </span> 
  <input type="text" class="input" name="scase"> 
  <span class="label">Срок окончание хранения </span> 
  <input type="date" class="input" name="date_end"> 
  <span class="label">Подписи принимающего</span> 
  <input class="input" name="rsign"> 
  <span class="label">Подписи сдающего </span> 
  <input class="input" name="rover"> 
  <span class="label">Отметка об уничтожении </span> 
  <input class="input" name="destroy"> 
  <br/> 
  <br /><input type="submit" name="add" value="Добавить" /> 
</form> 
</div> 
<hr> 
 
<table cellspacing="0" cellpadding="10" width="100%"> 
  <tbody> 
    <tr> 
      <td rowspan="2"><b> №п\п </b></td> 
      <td rowspan="2"><b> Дата поступление в архив </b></td> 
      <td rowspan="2"><b> Наименование дел </b></td> 
      <td colspan="2"><b> Номер </b></td> 
      <td colspan="2"><b> Количество листов </b></td> 
      <td rowspan="2"><b> Срок окончания хранения </b></td> 
      <td colspan="2"><b> Подписи ответственных лиц </b></td> 
      <td rowspan="2"><b> Отметка об уничтожении </b></td> 
    </tr> 
    <tr> 
      <td><b>по архиву</b></td> 
      <td><b>по номенклатуре дел</b></td> 
      <td><b>в описи</b></td> 
      <td><b>в деле</b></td> 
      <td><b>принимающего </b></td> 
      <td><b>сдающего</b></td> 
    </tr> 
    <tr class="no-padding"> 
      <td></td> 
      <td><input/></td> 
      <td><input/></td> 
      <td><input/></td> 
      <td><input/></td> 
      <td><input/></td> 
      <td><input/></td> 
      <td><input/></td> 
      <td><input/></td> 
      <td><input/></td> 
      <td><input/></td> 
</tr> 
</table> 
<hr> 
 
<body> 
  <div class=log> 
    <?php getlog(); ?> 
  </div> 
  <?php getMenu(); ?> 
  <html> 
 
  </html> 
  <div class='content'> 
    <h1>Журнал регистрации поступивших в архив дел</h1> 
    <div class='block'> 
      <table cellspacing="0" cellpadding="10" width="100%"> 
        <tbody> 
          <tr> 
            <td rowspan="2"><b> №п\п </b></td> 
            <td rowspan="2"><b> Дата поступление в архив </b></td> 
            <td rowspan="2"><b> Наименование дел </b></td> 
            <td colspan="2"><b> Номер </b></td> 
            <td colspan="2"><b> Количество листов </b></td> 
            <td rowspan="2"><b> Срок окончания хранения </b></td> 
            <td colspan="2"><b> Подписи ответственных лиц </b></td> 
            <td rowspan="2"><b> Отметка об уничтожении </b></td> 
          </tr> 
          <tr> 
            <td><b>по архиву</b></td> 
            <td><b>по номенклатуре дел</b></td> 
            <td><b>в описи</b></td> 
            <td><b>в деле</b></td> 
            <td><b>принимающего </b></td> 
            <td><b>сдающего</b></td> 
          </tr> 
          <?php 	 
	getConect(); 
	mysql_query("SET NAMES utf8"); 
	$i=1; 
	$query = mysql_query('SELECT * FROM `journal1`'); 
	while($row = mysql_fetch_array($query) ) 
	{ 
		echo "<tr><td>".$i."</td>"; 
		echo "<td>".$row['date_start']."</td>"; 
		echo "<td>".$row['named']."</td>"; 
		echo "<td>".$row['narchive']."</td>"; 
		echo "<td>".$row['nomenkl']."</td>"; 
		echo "<td>".$row['sopis']."</td>"; 
		echo "<td>".$row['scase']."</td>"; 
		echo "<td>".$row['date_end']."</td>"; 
		echo "<td>".$row['rsign']."</td>"; 
		echo "<td>".$row['rover']."</td>"; 
		echo "<td>".$row['destroy']."</td></tr>"; 
		$i++; 
	} 
	?> 
 
        </tbody> 
      </table> 
    </div> 
  </div> 
</body> 
 
</html> 
 
<?php 
	} 
	?>

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

Все вопросы

ТОП-10

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

Accept для файла с расширением csv

Суть проблемы: те пару файлов, с расширениемcsv, которые у меня есть, имеют mime-type application/vnd

133

HTML

Оптимальные размеры сайта

Я хочу сделать оптимизацию сайта под несколько определенных разрешений( width = 1366 \ 1920 \ 1280 \ 960 )

129

HTML

Табличная вёрстка

Имеется таблица 20х20На каждом из столбцов таблицы нужно расположить фишку, которая занимает сразу две строки и при этом имеет три строчки...

158

HTML

Скрыть содержимое блока при клике на jquery

Вот у меня есть два блока list, и мне нужно чтобы при клике на list-date пряталось содержимое блока list-block именно в том блоке list, где было кликнуто...

172