Почему этот CSS сейчас не работает? - PullRequest
Новая
       3

Почему этот CSS сейчас не работает?

10 голосов
/ 30 июня 2010

Я пытаюсь удержать div bar_top_container от переноса его содержимого независимо от ширины страницы (т.е. оба выделения должны отображаться всегда в одной строке), однако это не работает, когда ширина страницы для них мала чтобы оба поместились на одной строке, как я могу это исправить?

Стили: 

#bar_top_container { position: relative; white-space: nowrap; }
#bar_top_block { float: left; padding-left: 10px; padding-right: 10px; border-right: 1px solid #4965BB; }
#clear { clear: both; }

HTML: 

<div id="bar_top_container">
 <div id="bar_top_block">
  <span class="bold">select1:  </span>
   <select><option value="asdf">asdf</option></select>
 </div>
 <div id="bar_top_block">
  <span class="bold">asdf: </span>
   <select><option value="blah">-- select action --</option></select>
 </div>
 <div id="clear"></div>
</div>

Ответы [ 3 ]

17 голосов
/ 30 июня 2010

Вы можете иметь как block, так и inline свойства для элемента, если вы отображаете его как ... inline-block!

Вот ваш код исправленный и работающий:

  • span.bold: label s

  • a label связан с его элементом form через атрибуты for / id

  • bar_top_block - это id, используемый дважды.Должно быть class

  • не нужно float: left;, так как display: inline-block; используется

  • , таким образом, нет необходимости в очищающем элементе

  • элементы .bar_top_block также отображаются встроенными, поэтому любые пробелы между ними отображаются в виде пробелов.Чтобы избежать этого, я добавил комментарий, позволяющий избежать пробелов, но при этом позволяющий читать HTML-код.Текст внутри: ' без пробелов ', поэтому разработчик будет знать, что этот комментарий присутствует по какой-то причине и не должен быть удален:)

  • вы можете удалитьwidth на body, просто здесь для примера

  • вы можете играть со свойством overflow в контейнере

  • поскольку IE7 и ниже не понимают значение inline-block для таких элементов блока, как div, вы должны использовать display: inline и дать элементу hasLayout , например, с zoom: 1;

  • лучший способ для таргетинга IE7 и ниже, и только для этих браузеров есть условный комментарий

  • Iдобавлена ​​поддержка Fx2, но это только по историческим причинам:)

. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Stack Overflow 3150509 - Felipe</title>
    <style type="text/css">
body {
    width: 300px;
}

#bar_top_container {
    overflow: auto;
    white-space: nowrap;
    border: 1px solid red;
}

.bar_top_block {
    display: -moz-inline-stack; /* Fx2, if you've to support this ooold browser. You should verify that you can still click in the elements, there is a known bug with Fx2 */
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    border-right: 1px solid #4965BB;
}

    </style>
    <!--[if lte IE 7]><style type="text/css">
.bar_top_block {
    display: inline;
    zoom: 1;
}
    </style> <![endif]-->
</head>
<body>
    <form method="post" action="#" id="bar_top_container">
        <div class="bar_top_block">
            <label for="select1">Obviously I am a label: </label>
            <select id="select1"><option value="asdf">asdf</option></select>
        </div><!-- no whitespace
        --><div class="bar_top_block">
            <label for="select2">I'm a label too and I need a for attribute: </label>
            <select id="select2"><option value="blah">-- select action --</option></select>
        </div>
    </form>
</body>
</html>
3 голосов
/ 30 июня 2010

Обтекание плавающих элементов как white-space: nowrap не работает для блочных элементов, а только для встроенных элементов и текста.

0 голосов
/ 20 декабря 2012

Я предлагаю использовать действующую форму: 

<form>
  <label>select1: <select><option value="asdf">asdf</option></select></label>
  <label>asdf: <select><option value="blah">-- select action --</option></select></label>
</form>

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...