Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.09.2016, 19:22
Интересующийся
Отправить личное сообщение для Franky83 Посмотреть профиль Найти все сообщения от Franky83
 
Регистрация: 11.09.2016
Сообщений: 11

Как правильно сверстать?!
В диве должна находиться форма с тремя инпутами, которые тянутся на 100% ширины блока. Причем каждое поле имеет имя произвольной ширины (см. рис.)

Какие есть предложения?

Уже всё что хочешь перепробовал!!!!
Изображения:
Тип файла: jpg input.jpg (4.6 Кб, 15 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 12.09.2016, 14:45
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Franky83,
А если таблицу?
<table style='position: absolute;margin-left:-10px; width:100%'>
       <tr>
           <td style='width:200px'>наименование первой строки произвольной длины</td>
            <td><input type='text' style='width:100%;border:1px solid black'/></td>
       </tr>
       <tr>
           <td style='width:200px'>наименование второй строки </td>
            <td><input type='text' style='width:100%;border:1px solid black'/></td>
       </tr>
       <tr>
           <td style='width:200px'>третья строка</td>
            <td><input type='text' style='width:100%;border:1px solid black'/></td>
       </tr>
   </table>

Последний раз редактировалось Dilettante_Pro, 12.09.2016 в 15:07.
Ответить с цитированием
  #3 (permalink)  
Старый 12.09.2016, 20:05
Интересующийся
Отправить личное сообщение для Franky83 Посмотреть профиль Найти все сообщения от Franky83
 
Регистрация: 11.09.2016
Сообщений: 11

Спасибо за Ваше решение. Но надо чтобы в одну строку всё было.
Средствами css не знаю как сделать. С помощью JS , вот так у меня получилось
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>


    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('.textField').each(function (inx, item) {

                var parent = $(item).parent().outerWidth();
                var span = $(item).outerWidth();
                var input = $('<input/>').attr({type: 'text', class: 'd'});

                $(input).width(parent - span - 20);
                $(input).insertAfter(item);
            });


        })
    </script>
    <style>

        .main {
            position: relative;
            width: 600px;
            padding: 10px 0;
            background-color: #f35800;
        }

        .dd {
            position: relative;
            margin: 10px;
        }

        .d {
            position: absolute;
            width: 100%;
        }

        .textField {
            padding: 0 20px;

        }
    </style>
</head>
<body>
<div class="main">
    <div class="dd">
        <span class="textField">Subject: </span>

    </div>
    <div class="dd">
        <span class="textField">From: </span>

    </div>
    <div class="dd">
        <span class="textField">To: </span>

    </div>
</div>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 13.09.2016, 05:07
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Franky83, просто так не делается. Хотя бы потому, что лейбл может быть назван по желанию заказчика вот так "Количество поступлений за неделю". И капец твоему инпуту. Хочешь сам себя загнать в анус из-за дизигна? 200 ОК
Ответить с цитированием
  #5 (permalink)  
Старый 13.09.2016, 10:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,818

Franky83,
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
       <style>
    .main{
      position:relative;
      width:600px;
      padding:10px 0;
      background-color:#f35800;
    }

    .dd{
      display:flex;
      position:relative;
      margin:10px;
    }

    .d{
      flex-grow:1;
    }

    .textField{
      padding:0 20px;
    }
    </style>
</head>
<body>
<div class="main">
    <div class="dd">
        <span class="textField">Subject: </span><input type="text" class="d">

    </div>
    <div class="dd">
        <span class="textField">From: </span><input type="text" class="d">

    </div>
    <div class="dd">
        <span class="textField">To: </span><input type="text" class="d">

    </div>
</div>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 13.09.2016, 21:24
Интересующийся
Отправить личное сообщение для Franky83 Посмотреть профиль Найти все сообщения от Franky83
 
Регистрация: 11.09.2016
Сообщений: 11

Рони , ты лучший )
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пасоны, как правильно парсить параметры? megaupload Оффтопик 15 05.05.2013 14:44
Как правильно прицепить обработку события slowklg Events/DOM/Window 6 15.03.2012 15:20
Подскажите как правильно оформить код frolvict Общие вопросы Javascript 4 30.04.2010 10:51
Как правильно прописать свой код в .js Всеми_Любимый Элементы интерфейса 6 23.02.2010 21:34
Как правильно оформить Send() Алекс97 AJAX и COMET 20 30.10.2008 19:19