Я не могу ориентировать элементы form HTML

Я с чем-то просто, но которого по какому-то разуму я не могу добиваться. Как он говорит титул, я не могу ориентировать элементы формульного HTML. Он хотел увидеть, могли ли они давать мне руку. Здесь код:


    

            






И css:

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
    padding: 0px;
    margin: 0px;
    border:none;
    width: 100%;
}

#header{
    width: 100%;
    padding: 0px;
    margin: 0px;
    overflow:hidden;
}

#footer{
    position: fixed;
    bottom:0;
    left:0;
    width: 100%;
    padding: 0px;
    margin: 0px;
    overflow:hidden;
}

#formulario{
    margin: 0 auto;
    align-content: center;
    border-radius: 10px;
    border: 1px solid #666666;
    width: 500px;
}

label {
    font-weight: bold;
    color: #444;
    font-size: 14px;
}

input {
    font-size: 14px;
}

input[type="text"] {
    border-radius: 5px;
    margin: 10px 0;
    background: #fff;
    border: 1px solid #ccc;
    color: #777;
    max-width: 100%;
    outline: none;
    padding: 7px 8px;
}

input[type="submit"] {
    border-radius: 5px;
    margin: 10px 0;
    background: #0088B2;
    color: #fff;
    padding: 8px 14px;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

textarea{
    border-radius: 5px;
    margin: 10px 0;
    background: #fff;
    border: 1px solid #ccc;
    color: #777;
    max-width: 100%;
    outline: none;
    padding: 7px 8px;
}

input[type="submit"]:hover {
    background: #444;
}

Здесь задержание, поскольку остается сайт: introducir la descripción de la imagen aquí

8
задан 14.12.2016, 23:39
5 ответов

Я думаю, что ты используешь неправильное свойство, та, в которой ты нуждаешься в этом случае для формуляра, text-align вместо align-content (который является свойством контейнера flexbox):

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
    padding: 0px;
    margin: 0px;
    border:none;
    width: 100%;
}

#header{
    width: 100%;
    padding: 0px;
    margin: 0px;
    overflow:hidden;
}

#footer{
    position: fixed;
    bottom:0;
    left:0;
    width: 100%;
    padding: 0px;
    margin: 0px;
    overflow:hidden;
}

#formulario{
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #666666;
    width: 500px;
}
<body>
    <object id="header" data="header.html" onload="resizeObj(this);"></object>

            <form id="formulario" action="enviado.php" method="post">
                <div id="content">
                    <label>Nombre</label><br>
                    <input id="nombre" name="nombre" type="text" /> <br>
                    <label>Email</label><br>
                    <input id="email" name="email" type="text" /> <br>
                    <label>Contenido</label><br>
                    <textarea id="contenido" name="comment" cols="30" rows="5">Ingresa aqui el mensaje...</textarea><br>

                    <input id="campo3" name="enviar" type="submit" value="Enviar" />
                </div>
            </form>

     <object id="footer" data="footer.html" onload="resizeObj(this);" ></object>
</body>
9
ответ дан 24.11.2019, 13:13
  • 1
    OMG. Что noob мой jaja. Большое спасибо, с этим он пошел:) я должен ждать минуты, чтобы помечать ее как правильный ответ. Спасибо!;) –  Facundo Curti 03.10.2016, 21:31
  • 2
    не беспокойся брат, aqu и # 237; мы все изучаем всегда и имеем с лучшим из намерений: D дай ему со всем power 2.0! –  fredyfx 03.10.2016, 21:32
  • 3
    @FacundoCurti считай помечать и #233; sta ответ как правильная. –  gugadev 04.10.2016, 19:25
  • 4
    Я благодарен за комментарий за отрицательный обет. –  Shaz 26.10.2016, 13:30
#formulario{
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #666666;
    width: 500px;
}
2
ответ дан 24.11.2019, 13:13

Помести формуляр внутри div с классом и ты помещаешь его float none

<div class="centrar-form">
  <form>tus formularios</form>
</div>

.centrar-form{
 margin: 50px auto;
 float:none;
}

кроме того я рекомендую тебе работать с bootstrap и в помещать ему класс или style с resize:none остается более красивым и стилизуемым. (в bootstrap у тебя есть предопределенные классы для всех видов элементов, как например для inputs у тебя есть класс form-контроль, который оставляет тебе довольно красивые inputs)

2
ответ дан 24.11.2019, 13:13

Ты recomendarГ - в tambiГ©n другие два решения.

Первая состоит в том, чтобы добавлять padding к формуляру и добавлять 100 % шириной к элементам неудар в лунку, не centrarГ - в, но darГ - в очень хороший внешний вид.

form {
  padding: 30px;
}

form input, form textarea {
  display: block;
  width: 100%;
}

Пример: https://jsfiddle.net/ttbeobLm /

Вторая opciГіn сходная, но добавляя контейнер внутри form, добавлять ширину к контейнеру, и ориентировать это.

form {
  padding-bottom: 20px;
  padding-top: 20px;
}
form .content {
  margin: 0 auto;
  width: 90%;
}

form input, form textarea {
  display: block;
  width: 100%;
}

Пример: https://jsfiddle.net/ttbeobLm/1 /

2
ответ дан 24.11.2019, 13:13

Чтобы ориентировать элементы твоего формуляра (inputs и labels) ты можешь использовать text-align: center поскольку они прокомментировали тебе ранее.

Однако, так как ты используешь Bootstrap также ты можешь использовать предопределенный класс из-за Bootstrap вызов text-center прямо на формуляре.

<form id="formulario" action="enviado.php" method="post" class="text-center">

Действительно ты можешь использовать text-align: center или text-center на inputs и label благодаря тому, что у них есть по умолчанию свойство display: inline то, что способствует тому, чтобы к ним отнеслись как будто это были текст и следовательно тому, чтобы они смогли осваиваться.

Если у элементов, которые содержал формуляр, было, в Вашем недостатке, свойство display: block, они не освоились бы с известными свойствами ранее.

Кроме того, ты был бы должен удалять свойство align-content: center; твоего CSS, так как у него только был бы эффект, если бы ты поместил свойство display: flex (flexbox) в формуляр.

Твой исправленный пример:

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
    padding: 0px;
    margin: 0px;
    border:none;
    width: 100%;
}

#header{
    width: 100%;
    padding: 0px;
    margin: 0px;
    overflow:hidden;
}

#footer{
    position: fixed;
    bottom:0;
    left:0;
    width: 100%;
    padding: 0px;
    margin: 0px;
    overflow:hidden;
}

#formulario{
    margin: 0 auto;
    border-radius: 10px;
    border: 1px solid #666666;
    width: 500px;
}

label {
    font-weight: bold;
    color: #444;
    font-size: 14px;
}

input {
    font-size: 14px;
}

input[type="text"] {
    border-radius: 5px;
    margin: 10px 0;
    background: #fff;
    border: 1px solid #ccc;
    color: #777;
    max-width: 100%;
    outline: none;
    padding: 7px 8px;
}

input[type="submit"] {
    border-radius: 5px;
    margin: 10px 0;
    background: #0088B2;
    color: #fff;
    padding: 8px 14px;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

textarea{
    border-radius: 5px;
    margin: 10px 0;
    background: #fff;
    border: 1px solid #ccc;
    color: #777;
    max-width: 100%;
    outline: none;
    padding: 7px 8px;
}

input[type="submit"]:hover {
    background: #444;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <object id="header" data="header.html" onload="resizeObj(this);"></object>

            <form id="formulario" action="enviado.php" method="post" class="text-center">
                <div id="content">
                    <label>Nombre</label><br>
                    <input id="nombre" name="nombre" type="text" /> <br>
                    <label>Email</label><br>
                    <input id="email" name="email" type="text" /> <br>
                    <label>Contenido</label><br>
                    <textarea id="contenido" name="comment" cols="30" rows="5">Ingresa aqui el mensaje...</textarea><br>

                    <input id="campo3" name="enviar" type="submit" value="Enviar" />
                </div>
            </form>

     <object id="footer" data="footer.html" onload="resizeObj(this);" ></object>
</body>
0
ответ дан 24.11.2019, 13:13