теги dl и span в одну строку

Question

У меня есть такой код

<div>
<span>This is text</span>
<span>
    <dl>
        <dt><a href="#"><span>Please select category</span></a></dt>
        <dd>
            <ul>
                <li><a href="#">Brazil<span class="value">Cat1</span></a></li>
                <li><a href="#">France<span class="value">Cat2</span></a></li>
            </ul>
        </dd>
    </dl>
</span>
</div>

Вывод, который я хочу, находится в одной строке, как это.

Это текст {Выберите категорию из выпадающего списка}

В настоящее время проблема, с которой я столкнулся, стала двухстрочной.

Как я могу получить это в одну строку? Пожалуйста, помогите мне с этим. Благодаря.

Answer 1

В CSS:

dl, dd, dt { display: inline; }

Но вам, вероятно, не понравится результат. Почему вы все равно используете список определений? Просто используйте пролеты и UL.

Answer 2

Может быть, установка атрибута стиля max-width может помочь здесь. Установите значение, которое может содержать целое предложение.

Answer 3

Почему бы не использовать элемент label:

<div>
    <label>This is text</label>
    <dl>
        <dt><a href="#"><span>Please select category</span></a></dt>
        <dd>
            <ul>
                <li><a href="#">Brazil<span class="value">Cat1</span></a></li>
                <li><a href="#">France<span class="value">Cat2</span></a></li>
            </ul>
        </dd>
    </dl>
</div>

вместе с

label,dl
{
    display:inline-block;
}

Answer 4

Всегда есть возможность использовать стол.

<div>
<table><tr><td  valign=top >
<span><dl>This is text</span>
</td><td width=15 >&nbsp;</td><td   valign=top  >
<span>
    <dl>
        <dt><a href="#"><span>Please select category</span></a></dt>
        <dd>
            <ul>
                <li><a href="#">Brazil<span class="value">Cat1</span></a></li>
                <li><a href="#">France<span class="value">Cat2</span></a></li>
            </ul>
        </dd>
    </dl>
</span>
</td></tr></table>
</div>

Эй, я знаю, что это не лучшее решение, но оно делает свою работу.

Answer 5

Измените вторую строку вашего кода:

<span style="float: left">This is text</span>

Edit:

Измените свой код на:

<div style="float: left;">This is text</div>
<div style="margin-left: 80px;">
    <dl>
        <dt><a href="#"><span>Please select category</span></a></dt>
        <dd>
            <ul>
                <li><a href="#">Brazil<span class="value">Cat1</span></a></li>
                <li><a href="#">France<span class="value">Cat2</span></a></li>
            </ul>
        </dd>
    </dl>
</div>

Answer 6

Что-то вроде этого должно сделать это .. в вашей таблице стилей CSS добавьте:

dt {width: 100px; text-align:right; float:left; clear:left; line-height: 22px; padding-right: 3px;}
dd {margin-left: 100px; line-height: 22px;}

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