Выровнять содержимое DIV всегда в одну строку

Question

У меня есть следующее:

HTML

<th class="sort">
<div>
    <div class="sort"></div><a href="#">Last Name</a>

</div>
</th>

css:

table.tablesorter thead th.sort
{
    padding:0;
}

table.tablesorter thead th div.sort 
{
    margin:0;
    width:15px;
    height:30px;
    float:left;
    background: url("/Content/images/admin/sort.png") no-repeat;
    background-position: 0px center;
    cursor:pointer;
}

table.tablesorter thead tr th.sort a 
{
    cursor:pointer;
 color:inherit;
    vertical-align:middle;
    float: left; 
    padding-top: 7px;
}

Я хочу отобразить внутреннюю и внутреннюю вертикально выровненную середину и всегда на ОДНОЙ строкетак что при изменении размера окна браузера (маленького размера) оно не сломается и больше не будет внутренним (что и происходит сейчас).спасибо

Answer 1

используйте команду " display inline " ...

<div style="display:inline;float left;"><a href="#">First name</a></div>
<div style="display:inline;float right;"><a href="#">Last name</a></div>

Answer 2

Мне не ясно, на что ссылаются «внутренние» и «внутренние» (вы должны немного обновить и уточнить, а также опубликовать полную разметку для таблицы), но похоже, что вы в основном хотите все вЭто должно быть в одной непрерывной линии независимо от доступного пространства.Вы можете отключить перенос текста с помощью whitespace: nowrap;.Однако ваш контент будет переполнять th, потому что именно так работают ячейки таблицы, поэтому вам нужно установить overflow: hidden для чего-то, что оборачивает текст.Если вам не нужно больше одного элемента внутри ячеек, вам не нужен плавающий элемент.

Разметка может выглядеть следующим образом:

<thead>
  <th><div class="clip sort"><a href="#">First Name</a></th>
  <th><div class="clip sort"><a href="#">Last Name</a></th>
</thead>

С CSS так:

.clip {width: 100%; overflow: hidden; whitespace: nowrap;}
th {vertical-align: middle; height: 30px;}