Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
florida48
0 / 0 / 0
Регистрация: 12.02.2020
Сообщений: 2
1

Не корректно отображаются элементы

12.02.2020, 21:52. Просмотров 112. Ответов 2
Метки нет (Все метки)

Добрый день только начинаю верстать то есть учусь . Хочу сверстать форму но что то не работает
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
   <section class="info">
            <div class="wrapper">
                        <div class="text">
                            <p>Много много текста</p>
                        </div>
                        <form  name="newform">
                            <div class="block1">
                                    <input type="text">
                                    <input type="text">
                                    <input type="text">
                            </div>
                            <div class="block2">
                                    <input type="text">
                                    <input type="text">
                            </div>
                            <div class="block3">
                                    <input type="text">
                            </div>
                             <div class="block4">
                                    <input type="text">
                            </div>
                        </form>
                  </div>
   </section>
[CSS]
.wrapper{
max-width: 900px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.text{
max-width:42%;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box;
}

input{
margin-bottom: 30px;
display: block;
padding: 16px 22px;
max-width: 100%;
margin-left: 10px;
}

.form{
width: 100%;
}
.block1{
display: flex;
flex-wrap: wrap;
}

.block2{
display: flex;
flex-wrap: wrap;
}

У меня несколько вопросов когда делаю форму с инпутами то он занимает не всю остававшеюся ширину то есть не до конца враппера как можно это решить. Еще когда сжимаю до мобильной версии. То там где по три инпута не переходит на отдельные строчки то есть при мобильной версии я хотел что бы все инпуты находились на своей строчке и занимали 100 % ширины экрана то есть врапепера. Ну и еще вопрос при мобильной версии текст занимает max-width:42%; , подскажите а нельзя что бы по контенту я ставил не max-width:42%; а к примеру если у меня инпуты занимают 52% не указывая ширины то текст занимал 100% оставшегося места, и при мобильной версии он тоже растягивался на 100 ширины враппера. Вроде мне кажется сделал все парвильно но неправильно работает (( Может даст кто дельный совет или натолкнет что не так
0
Миниатюры
Не корректно отображаются элементы  
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.02.2020, 21:52
Ответы с готовыми решениями:

Элементы отображаются некорректно
Два столбца column-1 and column-2 должни отображаться по-идее внутри блока header(обозначен красним...

Элементы не отображаются на странице
Подскажите почему в браузере ничего не отображается? &lt;html&gt; &lt;body&gt; &lt;img width=&quot;500&quot; height=&quot;200&quot;...

Не отображаются элементы при использовании медиазапросов
Одним словом придумал себе задачу сделать, чтобы иконки соц кнопок появлялись при уменьшении экрана...

Не корректно отображаются картинки
Собственно сабж. Ниже привожу код. HTML &lt;div&gt;Код&lt;/div&gt;&lt;div&gt;&lt;/div&gt; CSS...

Шрифты в браузере не отображаются корректно
После обновления на Вин10 на ноуте стали на многих сайтах старнные шрифты. Как это поправить? Они...

2
florida48
0 / 0 / 0
Регистрация: 12.02.2020
Сообщений: 2
12.02.2020, 21:55  [ТС] 2
а вот как в мобилки я хотел видеть
0
Миниатюры
Не корректно отображаются элементы  
Panda58dev
Developer☭
48 / 27 / 3
Регистрация: 01.02.2019
Сообщений: 141
12.02.2020, 22:13 3
florida48, здравствуй, на счёт формы: в css у тебя указано .form, то есть класс с названием "form", но такого класса нет в html коде, поэтому тебе надо либо убрать точку, и css будет обращаться не к классу "form", а к тегу form, либо прописать вместо ".form" -> "newform". То есть у тебя должно получиться так:
CSS
1
2
3
form{
width: 100%;
}
либо так:
CSS
1
2
3
.newform {
width: 100%;
}
Для мобильных версий страницы сайта обычно пользуются оператором @media о нём можно почитать тут, а также, ты сам можешь воспользоваться гуглом и разобраться в этом получше.

Добавлено через 8 минут
Но для начала, я бы советовал освоить базовый синтаксис html и css, а уже позже начать разбираться, как делать адаптивные страницы
1
12.02.2020, 22:13
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.02.2020, 22:13

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Не корректно отображаются русские символы
Здравствуйте, ребята! Я выгружаю таблицу из mssql в excel c помощью bcp set @sql='exec...

Не корректно отображаются товары на woocommerce
Здравствуйте, такая проблема: 1 товар на woocommerce идет выше других (второй ряд - первый) Вот...

Не корректно отображаются значки на Рабочем Столе
А что конкретнее делать далее подскажите плиз.


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

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

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