Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.71/7: Рейтинг темы: голосов - 7, средняя оценка - 4.71
romastic
0 / 0 / 0
Регистрация: 21.10.2014
Сообщений: 3
#1

Выравнивание элементов формы

21.10.2014, 10:43. Просмотров 1314. Ответов 6
Метки нет (Все метки)

Создаю форму обратной связи.

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

Видимо где-то просчитался.
Помогите, пожалуйста, разобраться.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            #wrapper {
                max-width: 960px;
                margin: 0 auto;
                padding: 15px 0;
                border: 1px solid #000;
            }
            
            #form {
                padding: 0 1%;
                margin: 0 0;
            }
 
            #form li {
                width: 47%;
                display: inline-block;
                min-width: 250px;
                margin: 0 1% 10px;
                border: 1px solid #ccc;
                list-style: none;
                
            }
 
            #form .full {
                width: 98%;
                color: red;
            }
 
        </style>
    </head>
    
    <body>
        <div id="wrapper">
 
            
                
                <ul id="form">
                    <li>
                        <p>Здесь будет элемент формы</p>
                    </li>
                    
                    <li>
                        <p>Здесь будет элемент формы</p>
                    </li>
                    
                    <li>
                        <p>Здесь будет элемент формы</p>
                    </li>
                    
                    <li class="full">
                        <p>Здесь будет элемент формы</p>
                    </li>
                    
                    <li>
                        <p>Здесь будет элемент формы</p>
                    </li>
                    
                    <li>
                        <p>Здесь будет элемент формы</p>
                    </li>
                </ul>
        </div>
    </body>
</html>
0
Миниатюры
Выравнивание элементов формы  
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.10.2014, 10:43
Ответы с готовыми решениями:

выравнивание элементов формы
здравствуйте дорогие друзья! у меня такой вопрос, есть ... &lt;p&gt;&lt;?php require...

Выравнивание элементов формы
Всех приветствую. Только только начал осваивать html. Пытаюсь создать простую...

Выравнивание элементов формы, Bootstrap
Доброго времени суток, форумчане! Подскажите пожалуйста как выровнять элементы...

Выравнивание формы по верху
У меня возникла такая проблема. Создал так сказать Главную таблицу, которая...

Выравнивание формы в ячейке таблицы
Есть php код, генерирующий таблицу: echo &quot;&lt;table border='1'&gt;&quot;; echo...

6
and_y87
Web-Разработчик
407 / 355 / 78
Регистрация: 27.02.2012
Сообщений: 1,311
Записей в блоге: 84
21.10.2014, 12:08 #2
romastic, У Вас адаптивная форма?
Если нет то какой смысл делать её не в таблице?
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2636 / 2280 / 1017
Регистрация: 15.12.2012
Сообщений: 8,437
Записей в блоге: 1
21.10.2014, 12:14 #3
romastic, если Вам от этого легче станет замените 98% на 96.5% для #form .full... Если честно, то вёрстка такой простенькой формы в Вашем варианте оставляет желать лучшего, мягко говоря...
0
romastic
0 / 0 / 0
Регистрация: 21.10.2014
Сообщений: 3
21.10.2014, 12:27  [ТС] #4
Спасибо за ответы!
Форма должна быть адаптивной.
Версткой сам по себе не занимаюсь, поэтому допускаю, что криво что-то делаю.

В любом случае это всего лишь рыба. Или формы совсем не так верстают?

PS. 96.5% пробовал. При достаточно большом размере страницы выглядит хорошо, но при уменьшении сразу становится видно, что не ровно
0
and_y87
Web-Разработчик
407 / 355 / 78
Регистрация: 27.02.2012
Сообщений: 1,311
Записей в блоге: 84
21.10.2014, 12:59 #5
Лучший ответ Сообщение было отмечено Fedor92 как решение

Решение

romastic, можно как бы так (тык)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<div id="wrapper">
 
    <ul id="form">
 
        <li class="row" >
 
            <div class="input">
                <p>Здесь будет элемент формы</p>
            </div>
 
            <div class="input">
                <p>Здесь будет элемент формы</p>
            </div>
 
        </li>
 
        <li class="row" >
 
            <div class="input">
                <p>Здесь будет элемент формы</p>
            </div>
 
            <div class="input">
                <p>Здесь будет элемент формы</p>
            </div>
 
        </li>
 
 
        <li class="row full">
            <div class="input">
                <p>Здесь будет элемент формы</p>
            </div>
        </li>
 
        <li class="row" >
 
            <div class="input">
                <p>Здесь будет элемент формы</p>
            </div>
 
            <div class="input">
                <p>Здесь будет элемент формы</p>
            </div>
 
        </li>
 
    </ul>
 
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#wrapper
    {
        max-width: 960px;
        margin: 0 auto;
        padding: 15px 0;
        border: 1px solid #000;
    }
 
    #form
    {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    #form * { box-sizing: border-box }
 
    #form .row
    {
        width: 100%;
        padding: 0 1%;
        margin-bottom: 10px;
        list-style: none;
    }
    #form .row:after
    {
        content: '';
        clear: both;
        display: block;
    }
 
    #form .input
    {
        display: inline-block;
        min-width: 250px;
        width: 48%;
        margin: 0 1%;
        outline: 1px solid #ccc;
        float: left;
    }
    #form .full .input
    {
        width: 98%;
    }
0
romastic
0 / 0 / 0
Регистрация: 21.10.2014
Сообщений: 3
21.10.2014, 13:02  [ТС] #6
Просто мега спасибо!
Теперь заодно немного разберусь как правильно позиционировать.
А то нигде в инете не могу найти нормальное пошаговое руководство по позиционированию элементов.
0
and_y87
Web-Разработчик
407 / 355 / 78
Регистрация: 27.02.2012
Сообщений: 1,311
Записей в блоге: 84
21.10.2014, 13:03 #7
update добавил медиазапрос для чёткого отображения при маленькой ширине экрана...

Добавлено через 52 секунды
romastic, всё на личном опыте усваивается лучше всего... просто надо этим заниматься заниматься заниматься заниматься ))
0
21.10.2014, 13:03
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.10.2014, 13:03

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

Выравнивание элементов
Всем привет!! У меня есть вот такой код, он выводит 2 иконки, но они вместе...

Выравнивание элементов
Приветствую уважаемое сообщество! Проблема в том, что не могу сделать...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru