Как выровнять список предложений по положению текстового поля - PullRequest
Новая
       20

Как выровнять список предложений по положению текстового поля

0 голосов
/ 01 мая 2018

У меня есть div, в котором есть текстовое поле. Перед текстовым полем есть текст.

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

Вот фрагмент кода 

function getval()
{

  textval = document.getElementById("srval").value;
  if(textval.length>0)
  {
      document.getElementById("list").style.display="block";
  }
  else
  {
        document.getElementById("list").style.display="none";     
  }
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<div style="border:1px red solid;width:250px;height:20px">
 Coffeee Teat MIlk
   <input type="text" id="srval" onkeyup="getval()" style="position:absolute">
  	 <ul style="display:none;position:relative;top:5px" id="list">
  		<li>Coffee</li>
 		 <li>Tea</li>
  		<li>Milk</li>
	</ul>

</div>
</body>
</html>

1 Ответ

0 голосов
/ 01 мая 2018

Надеюсь, это поможет 

function getval() {

  textval = document.getElementById("srval").value;
  if (textval.length > 0) {
    document.getElementById("list").style.display = "block";
  } else {
    document.getElementById("list").style.display = "none";
  }
}
label {
  border: 1px red solid;
  width: 250px;
  height: 20px
}

input {
  position: absolute
}

#list {
  display: none;
}

#list,
#list li {
  position: relative;
  left: 50px
}
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>

  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
  <form>
    <label style="border:1px red solid;width:250px;height:20px">
 Coffeee Teat Milk</label>
    <input type="text" id="srval" onkeyup="getval()" style="">
    <ul id="list">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>


  </form>
</body>

</html>
...