Укладка вокруг горизонтальной формы - PullRequest
Новая
       1

Укладка вокруг горизонтальной формы

0 голосов
/ 05 января 2019

Я создал форму, которая выровнена по горизонтали с метками сверху. У меня возникли трудности с выравниванием кнопки =, и я использовал трюк с & nbsp, чтобы выровнять его. Я не мог найти лучшего решения для этого, есть что-то лучше сделать?

Я хочу наложить рамку вокруг формы и выровнять ее по центру страницы . Я пробовал несколько вещей, таких как размещение в таблице или использование другого div, но безуспешно. Это мой код до сих пор (я не включил скрипт для расчетов): 

<!DOCTYPE html>
<html>
<head>
    <title> Calculator</title>  
    <style>
        input, label{
            display:block;
        }
        label{
            text-align:center;
            margin-bottom:4px;
        }
    </style>
</head>
<body>
    <h1 style="text-align:center">Calculator</h1>
        <form name="CL">
            <div style="float:left;margin-right:20px;">
                <label for="N1">X</label>
                <input type="text" name="N1" id="N1">
            </div>
            <div style="float:left;margin-right:20px;">         
                <label for "O">Operator</label> 
                <select type="text" name="O" id="O" style="width:50px">
                <option value="0"> +</option>
                <option value="1">-</option>
                <option value="2">*</option>
                <option value="3">/</option>
                </select>
                </div>
            <div style="float:left;margin-right:20px;">
                <label for="N2">Y</label>
                <input type="text" name="N2" id="N2">
            </div>
            <div style="float:left;">
                <label>&nbsp </label>
                <input type="button" value="=" onclick="calc()">
            </div>
            <div style="float:left;">
                <label for="R">Result</label>
                <input type="text" name="R" id="R">
            </div>
            </div>
        </form>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 05 января 2019

Вы можете создать оболочку DIV вокруг нее и сделать ее гибким контейнером, используя следующие настройки для центрирования по горизонтали и вертикали: 

html,
body {
  height: 100%;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

form {
  padding: 10px;
  border: 1px solid #ddd;
}
<!DOCTYPE html>
<html>

<head>
  <title> Calculator</title>
  <style>
    input,
    label {
      display: block;
    }
    
    label {
      text-align: center;
      margin-bottom: 4px;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <h1 style="text-align:center">Calculator</h1>
    <form name="CL">
      <div style="float:left;margin-right:20px;">
        <label for="N1">X</label>
        <input type="text" name="N1" id="N1">
      </div>
      <div style="float:left;margin-right:20px;">
        <label for "O">Operator</label>
        <select type="text" name="O" id="O" style="width:50px">
          <option value="0"> +</option>
          <option value="1">-</option>
          <option value="2">*</option>
          <option value="3">/</option>
        </select>
      </div>
      <div style="float:left;margin-right:20px;">
        <label for="N2">Y</label>
        <input type="text" name="N2" id="N2">
      </div>
      <div style="float:left;">
        <label>&nbsp </label>
        <input type="button" value="=" onclick="calc()">
      </div>
      <div style="float:left;">
        <label for="R">Result</label>
        <input type="text" name="R" id="R">
      </div>
    </form>
  </div>
</body>

</html>
0 голосов
/ 05 января 2019

Что вы можете сделать, это задать ширину формы и использовать margin: 0 auto, чтобы выровнять ее по центру, и установить overflow: auto;

Например: 

input, label{
    display:block;
}
label{
    text-align:center;
    margin-bottom:4px;
}
form {
    width: 90%;
    margin: 0 auto;
    border: 1px solid #ccc;
    overflow: auto;
    padding: 5px;
}
form div {
    float: left;
    margin-right:20px;
}


<!DOCTYPE html>
<html>

<head>
  <title> Calculator</title>
  <style>
    input,
    label {
      display: block;
    }
    
    label {
      text-align: center;
      margin-bottom: 4px;
    }
    
    form {
      width: 90%;
      margin: 0 auto;
      border: 1px solid #ccc;
      overflow: auto;
      padding: 5px;
    }
    
    form div {
      float: left;
      margin-right: 20px;
    }
  </style>
</head>

<body>
  <h1 style="text-align:center">Calculator</h1>
  <form name="CL">
    <div>
      <label for="N1">X</label>
      <input type="text" name="N1" id="N1">
    </div>
    <div>
      <label for="O">Operator</label>
      <select name="O" id="O" style="width:50px">
        <option value="0"> +</option>
        <option value="1">-</option>
        <option value="2">*</option>
        <option value="3">/</option>
      </select>
    </div>
    <div>
      <label for="N2">Y</label>
      <input type="text" name="N2" id="N2">
    </div>
    <div>
      <label>&nbsp </label>
      <input type="button" value="=" onclick="calc()">
    </div>
    <div>
      <label for="R">Result</label>
      <input type="text" name="R" id="R">
    </div>
  </form>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...