дисплей текст и Выпадающий в 2-х линий вместо 4-х линий

мы имеем 4 Текст & DropDown с каждым имеют различные выпадающие окна, отображающие в 4 линий, как показано ниже:дисплей текст и Выпадающий в 2-х линий вместо 4-х линий

Мы хотим, чтобы отобразить 2 Текст & Выпадающая группа в одной строке & другие 2 внизу этой строки.

Я попытался float : left ; , display :block; display: inline-block ничего не работает для меня правильно, вместо этого он отображается как это:

Если кто-то хочет, вот site link

<dt> 
    <label class="required"> 
    <em>*size</em> 
    </label> 
</dt> 
<dd> 
    <div> 
     <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"> 
     <option value="4397" price="30">Mini (16.98″x12.00″) +Rs30.00</option> 
     <option value="4398" price="40">Small (16.98″x12.00″) +Rs40.00</option> 
     </select> 
    </div> 
</dd> 
<dt> 
    <label class="required"> 
    <em>*Frame style</em> 
    </label> 
</dt> 
<dd> 
    <div> 
     <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"> 
     <option value="4397" price="30">Cherry</option> 
     <option value="4398" price="40">Natural</option> 
     </select> 
    </div> 
</dd> 
<dt> 
    <label class="required"> 
    <em>*Frame style Size</em> 
    </label> 
</dt> 
<dd> 
    <div> 
     <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"> 
     <option value="4397" price="30">0.75</option> 
     <option value="4398" price="40">1.25</option> 
     </select> 
    </div> 
</dd> 
<dt> 
    <label class="required"> 
    <em>*Matboard</em> 
    </label> 
</dt> 
<dd> 
    <div> 
     <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"> 
     <option value="4397" price="30">Black</option> 
     <option value="4398" price="40">White</option> 
     </select> 
    </div> 
</dd>

CSS

<style> 

    .required { 
     float: left; 
     padding-right: 15px; 
    } 

    .product-options dd { 
     padding: 0 0 10px 0; 
     margin: 0 0 5px; 
     border-bottom: 1px solid #ededed; 
    } 

    dd { 
     display: block; 
     -webkit-margin-start: 40px; 
    } 

    </style>

источник

2017-01-12 Anonymous

Пожалуйста, всегда используйте правильный отступ. – Roope

@Roope извините, позвольте мне изменить вопрос ..... –

Элементы span неплохо выравниваются по горизонтали. –

Добавьте это в CSS, дайте мне знать, если это то, что вы необходимость ?

.product-options dt, .product-options dd { 
    width: 90px; 
    vertical-align: middle; 
    margin: 0 5px 0 0; 
    display: inline-block; 
}

источник

2017-01-13 06:03:17

отлично, спасибо большое, это я хотел ..... –

вы можете проверить [ссылка] (http: // sbdev2. kidsdial.com:81/spock1.html) –

Что вам нужно в этом? –

-1

Используйте окружные обертки в 2 раскрывающихся меню, чтобы создать строки.

<div class="wrapper"> 
    <dt> 
     <label class="required"> 
      <em>*size</em> 
     </label> 
    </dt> 
    <dd> 
     <div> 
      <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"> 
       <option value="4397" price="30">Mini (16.98″x12.00″) +Rs30.00</option> 
       <option value="4398" price="40">Small (16.98″x12.00″) +Rs40.00</option> 
      </select> 
     </div> 
    </dd> 

    <dt> 
     <label class="required"> 
      <em>*Frame style</em> 
     </label> 
    </dt> 
    <dd> 
     <div> 
      <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"> 
       <option value="4397" price="30">Cherry</option> 
       <option value="4398" price="40">Natural</option> 
      </select> 
     </div> 
    </dd> 
</div>

Затем вы можете применить display: inline-block вместе с vertical-align: middle правильно выровнять их. Что-то вроде этого:

dd, dt { 
    display: inline-block; 
    vertical-align: middle; 
}

Примечания: Возможно, вы также хотите, чтобы сделать селектор CSS немного более конкретным, чем выше пример.

источник

2017-01-12 12:23:09

Спасибо, я попробовал ваш код, но поскольку это сайт magento, значения будут сохранены в базе данных & html-структура элемента проверки отличается от real file, есть ли способ исправить проблему только с помощью css? –

Это будет сложно, потому что как-то он должен знать, что ему нужно прорваться в новую строку после двух выпадающих меню. Кроме того, вы также можете добавить фиксированную ширину к элементам dd и dt, чтобы заставить их использовать новую строку после заполнения 100% заполняемого пространства. Но семантически, обертывание их вокруг div увеличивает гибкость. –

Спасибо за поддержку, я нашел решение, извините, что, поскольку я плохо разбираюсь в кодировании, я не смог правильно выполнить ваше решение ..... –

Попробуйте этот код:

.required { 
 
    float: left; 
 
    padding-left: 15px; 
 
    margin-top:50px; 
 
} 
 

 
.product-options dd { 
 
    padding: 0 0 10px 0; 
 
    margin: 0 0 5px; 
 
    border-bottom: 1px solid #ededed; 
 
} 
 

 
dd { 
 
    display: block; 
 
    
 
    float:left; 
 
    margin-top:50px; 
 
}

<dt> 
 
<label class="required"> 
 
<em>*size</em> 
 
</label> 
 
</dt> 
 
<dd> 
 
<div> 
 
<select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"> 
 
<option value="4397" price="30">Mini (16.98″x12.00″) +Rs30.00</option> 
 
<option value="4398" price="40">Small (16.98″x12.00″) +Rs40.00</option> 
 
</select> 
 
</div> 
 
</dd> 
 

 

 

 
<dt> 
 
<label class="required"> 
 
<em>*Frame style</em> 
 
</label> 
 
</dt> 
 
<dd> 
 
<div> 
 
<select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"> 
 
<option value="4397" price="30">Cherry</option> 
 
<option value="4398" price="40">Natural</option> 
 
</select> 
 
</div> 
 
</dd> 
 

 

 

 
<dt> 
 
<label class="required"> 
 
<em>*Frame style Size</em> 
 
</label> 
 
</dt> 
 
<dd> 
 
<div> 
 
<select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"> 
 
<option value="4397" price="30">0.75</option> 
 
<option value="4398" price="40">1.25</option> 
 
</select> 
 
</div> 
 
</dd> 
 

 

 

 
<dt> 
 
<label class="required"> 
 
<em>*Matboard</em> 
 
</label> 
 
</dt> 
 
<dd> 
 
<div> 
 
<select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"> 
 
<option value="4397" price="30">Black</option> 
 
<option value="4398" price="40">White</option> 
 
</select> 
 
</div> 
 
</dd>

источник

2017-01-12 12:28:20 user7357089

Спасибо, я попробовал ваш код, но поскольку это сайт magento, значения willl будет сохранено в базе данных & html-структура элемента проверки отличается от реального файла, есть ли способ исправить проблему только с помощью css? –

Теперь проверьте его, только используя css – user7357089

Спасибо, я обновил ваш код css, можете ли вы проверить [link] (http://sbdev2.kidsdial.com:81/spock1.html) –

Это может работать для вас

стилей:

dd, dt{ 
    float: left; 
    display: inline-block; 
} 

dt{ 
    margin-top: 15px !important; 
    margin-left: 10px !important; 
}

источник

2017-01-12 12:30:17

вы можете посетить [link] (http://sbdev2.kidsdial.com:81/spock.html) и проверить, есть ли способ решить только css –

@ user5348fh8y5, попробуйте этот обновленный код в ваших стилях –

Я бы рекомендовал использовать bootstra p сетки для лучшего внешнего вида.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    
 
    <form> 
 
    <div class="row"> 
 
    \t 
 
    <div class="col-xs-6"> 
 
     <div class="form-group"> 
 
     <label for="sel1">Select Text</label> 
 
     <select class="form-control" id="sel1"> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="col-xs-6"> 
 
     <div class="form-group"> 
 
     <label for="sel1">Select Text</label> 
 
     <select class="form-control" id="sel1"> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
     
 
    </div> 
 
    
 
    
 
    <div class="row"> 
 
    \t 
 
    <div class="col-xs-6"> 
 
     <div class="form-group"> 
 
     <label for="sel1">Select Text</label> 
 
     <select class="form-control" id="sel1"> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="col-xs-6"> 
 
     <div class="form-group"> 
 
     <label for="sel1">Select Text</label> 
 
     <select class="form-control" id="sel1"> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
     
 
    </div> 
 
     
 
     
 
    </div> 
 
    </form> 
 
</div> 
 

 
</body> 
 
</html>

источник

2017-01-12 12:34:46

Спасибо, я попробовал ваш код, но поскольку это сайт magento, значения будут сохранены в базе данных & html-структура элемента проверки отличается от реального файла, есть ли способ исправить проблему только с помощью css? –

Спасибо за поддержку, я нашел решение, извините, что, поскольку я плохо разбираюсь в кодировании, я не смог надлежащим образом выполнить ваше решение ..... –

@ user5348fh8y5 Его прекрасный..Глад, чтобы помочь вам. и вы можете редактировать и использовать это перо в своем коде .. http://codepen.io/shivk/pen/ggMaOE –

<div> 
    <div class="s"> 
     <dt> 
      <label class="required"> 
      <em>*size</em> 
      </label> 
     </dt> 
     <dd class="d"> 
     <div> 
      <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"> 
       <option value="4397" price="30">Mini (16.98″x12.00″) +Rs30.00</option> 
       <option value="4398" price="40">Small (16.98″x12.00″) +Rs40.00</option> 
      </select> 
      </div> 
     </dd> 
    </div> 
    <div class="s"> 
    <dt> 
     <label class="required"> 
      <em>*Frame style</em> 
     </label> 
    </dt> 
    <dd class="d"> 
     <div> 
      <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"> 
       <option value="4397" price="30">Cherry</option> 
       <option value="4398" price="40">Natural</option> 
      </select> 
     </div> 
    </dd> 
    </div>

<style> 
    .s{ 
    display: inline-flex; 
    } 
    .d{ 
    margin: 0; 
    } 

    .required { 
    float: left; 
    padding-right: 15px; 
      } 

    .product-options dd { 
    padding: 0 0 10px 0; 
    margin: 0 0 5px; 
    border-bottom: 1px solid #ededed; 
    } 

    dd { 
    display: block; 
    -webkit-margin-start: 40px; 
    }

источник

2017-01-12 12:53:49

Спасибо, но поскольку это сайт magento, значения будут сохранены в структуре database & html элемента проверки, отличной от реального файла, есть ли способ исправить проблему только с помощью css? –

проверить мой ответ! –

Есть ли способ решить проблему только с помощью css? –

Есть много способов сделать это.

с начальной загрузки
С Таблица
С Div

Demo and Code это с помощью DIV

CSS

.row{ 
     float:left; 
     width:100%; 
    } 
    .col{ 
     float:left; 
     width:50% 
    } 
    .required { 
      float: left; 
      padding-right: 15px; 
     }

HTML

<div class="row"> 
<div class="col"> 
<label class="required"> 
    <em>*size</em> 
    </label> 
<select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"> 
     <option value="4397" price="30">Mini (16.98″x12.00″) +Rs30.00</option> 
     <option value="4398" price="40">Small (16.98″x12.00″) +Rs40.00</option> 
    </select> 
</div> 
<div class="col"> 
<label class="required"> 
    <em>*Frame style</em> 
    </label> 
<select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"> 
     <option value="4397" price="30">Cherry</option> 
     <option value="4398" price="40">Natural</option> 
    </select> 
</div> 
</div> 
<div class="row"> 
<div class="col"> 
<label class="required"> 
    <em>*Frame style Size</em> 
    </label> 
    <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"> 
     <option value="4397" price="30">0.75</option> 
     <option value="4398" price="40">1.25</option> 
    </select> 
</div> 
<div class="col"> 
<label class="required"> 
    <em>*Matboard</em> 
    </label> 
<select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"> 
     <option value="4397" price="30">Black</option> 
     <option value="4398" price="40">White</option> 
    </select> 
</div> 
</div>

Надежда Это помогает :)

это Demo and Code используя таблицу

TRY ЭТО ДЛЯ КОДА

.product-options dt { 
float:left; 
max-width:20%; 
} 
.product-options dd { 
float:left; 
max-width:28%; 
}

источник

2017-01-12 12:58:18

вы можете посетить [link] (http://sbdev2.kidsdial.com:81/spock.html) и проверить, есть ли способ решить только с помощью css –

@ user5348fh8y5 проверить обновленный ответ. Надеюсь, ты этого хочешь. –

дисплей текст и Выпадающий в 2-х линий вместо 4-х линий

ответ

Смежные вопросы