Расположение фигуры на одной строке с текстом

338

26 сентября 2017, 04:47

Как поставить квадрат на одной линией с текстом?

/* Styles go here */ 
 
#square { 
	width: 30px; 
	height: 30px; 
	border-style: solid; 
}

<!DOCTYPE html> 
<html> 
 
<head> 
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
  <link rel="stylesheet" href="style.css" /> 
  <script src="script.js"></script> 
</head> 
 
<body> 
  <hr> 
  <div class="container" style="float: left;"> 
    1. Что такое ОЗУ? 
    <br> 
    <br> 
    <div>1) Оперативно запоминающее устройство.</div> 
    <div>2) Оперативно загружающееся устройство.</div> 
    <br> 
 
    <div> 
      <div> 
        <div>Номер правильного варианта задания <b>1</b>:</div> 
 
        <p id="square"></p> 
      </div> 
    </div> 
    <br> 
    <hr> 
  </div> 
 
</body> 
 
</html>

Сейчас выводит:

А я хочу чтобы было так:

Как этого добиться? Я испробовал различные варианты, но ничего не получается.

Answer 1

Можна так, зделать.

/* Styles go here */ 
.container{width:450px;} 
#square { 
	width: 30px; 
	height: 30px; 
	border-style: solid; 
    display:inline-block; 
    position: relative; 
    top:18px; 
} 
.text{ 
width:70%; 
display:inline-block;      
}

<!DOCTYPE html> 
<html> 
 
<head> 
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
  <link rel="stylesheet" href="style.css" /> 
  <script src="script.js"></script> 
</head> 
 
<body> 
  <hr> 
  <div class="container" style="float: left;"> 
    1. Что такое ОЗУ? 
    <br> 
    <br> 
    <div>1) Оперативно запоминающее устройство.</div> 
    <div>2) Оперативно загружающееся устройство.</div> 
    <br> 
 
    <div> 
      <div> 
        <div class="text">Номер правильного варианта задания <b>1</b>:</div> 
 
        <p id="square"></p> 
      </div> 
    </div> 
    <br> 
    <hr> 
  </div> 
 
</body> 
 
</html>

можна через display:flex;

Answer 2

/* Styles go here */ 
 
#square { 
	width: 30px; 
	height: 30px; 
	border-style: solid; 
}

<!DOCTYPE html> 
<html> 
 
<head> 
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
  <link rel="stylesheet" href="style.css" /> 
  <script src="script.js"></script> 
</head> 
 
<body> 
  <hr> 
  <div class="container" style="float: left;"> 
    1. Что такое ОЗУ? 
    <br> 
    <br> 
    <div>1) Оперативно запоминающее устройство.</div> 
    <div>2) Оперативно загружающееся устройство.</div> 
    <br> 
 
    <div> 
      <div style="display:flex; align-items:center;"> 
        <div>Номер правильного варианта задания <b>1</b>:</div> 
 
        <p id="square" ></p> 
      </div> 
    </div> 
    <br> 
    <hr> 
  </div> 
 
</body> 
 
</html>