Компоненты меню "Усадка к месту" - растет первый предмет

Скажем, у меня есть меню с заданной шириной.

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

Вот так:

                                                       Fill | item | item | item

До сих пор ближе всего к достижению этого эффекта было использование display:table-cell в коде css для каждого пункта меню. Но проблема в том, что если я не определяю ширину для элемента, все они расширяются, чтобы занять ту же ширину в таблице.

      Fill      |      item      |      item      |      item      |      item

Есть ли способ уменьшить пространство предметов, чтобы оно соответствовало элементу, и заполнить элемент заполнить оставшуюся часть div?

Ответы

Ответ 1

Почему бы не использовать float вместо этого? Просто измените порядок пунктов меню.

#menubar {
  background-color: lime;
  width: 100%;
}
.menuitem {
  float: right;
  padding-right: 10px;
  padding-left: 10px;
}

/* Clear float */
#menubar:after {
  content: ' ';
  display: block;
  clear: right;
}
<div id="menubar">
  <div class="menuitem">item</div>
  <div class="menuitem">item</div>
  <div class="menuitem">item</div>
  <div class="menuitem">item</div>
  <div class="menuitem">fill</div>
</div>

Ответ 2

Для тех, кто хочет сделать это с таблицей, вы можете дать первому "td" класс и установить его на смехотворно большую ширину, тогда он будет толкать и заставлять другие столбцы сжиматься настолько, насколько это возможно. Это работает, потому что таблицы не могут расширяться больше, чем ширина, на которую они были установлены.

Например:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table td {
    border:solid 1px #000;
}
table td.fill {
    width:9999em;
    text-align:right;
}
table {
    width:300px;
    border-collapse:collapse;
}
</style>
</head>
<body>
    <table>
        <tr><td class="fill">Fill</td><td>item</td><td>item</td><td>item</td></tr>
    </table>
</body>
</html>

В старом примере, который работал только в Firefox и IE, я установил ширину "td" на 0, а затем уменьшил столбец настолько, насколько мог.

Вы можете установить для всех столбцов сжатие, чтобы подогнать их, установив ширину td на что-то маленькое, например, 1px, когда вы не устанавливаете ширину таблицы, это работает в Chrome, Firefox и IE.

table td {
  width:1px;
}

Возможно, вы захотите установить white-space:nowrap; тоже, иначе все слова будут перенесены, или придать td немного большую width

Ответ 3

Один из способов решения этой проблемы - применить width: 1px; к каждому <TH>, где я хочу, чтобы их ячейки сокращались. Затем в каждой отдельной ячейке, где я хочу сжиматься до содержимого, я применяю white-space: nowrap;. Это предотвращает фактическое сокращение ячейки до 1px.

Я использую этот метод в таблице финансовых показателей, поэтому я не уверен, работает ли он с более длинными абзацами текста.

Ответ 4

Добро пожаловать в 2014 год

Пусть гибкий

Теперь мы можем рассчитывать на будущее, когда Flexbox является стандартным. В настоящее время Рекомендация кандидата W3C, Flexbox в настоящее время ограничена поддержкой браузера (что важно, только IE 11 поддерживает текущую модель).

Гибкая навигация с более крупным первым ребенком

Разметка

<nav>
    <a href="#">Fill</a>
    <a href="#">Item</a>
    <a href="#">Item</a>
    <a href="#">Item</a>
</nav>

Сгибание

Регулярные ссылки получают flex: 0 0 auto:

  • 0 - не растут
  • 0 - не сжимайте
  • auto - не допускайте переполнения текста (auto предположительно по умолчанию, но переполнение текста без его установки)

Первая ссылка получает flex: 1 0 auto:

  • 1 - возьмите оставшуюся ширину
  • 0 - не сжимайте
  • auto - не допускайте переполнения текста
nav {
  display: flex;
}
nav a {
  flex: 0 0 auto; 
}
nav a:first-child {
  flex: 1 0 auto;
}

Это руководство Flexbox очень полезно.

Комбинация (с добавлением пуха)

Запустите снимок ниже

/* 
For the purpose of this demo:
toggle active class on click
*/

$('nav a').on('click', function() {
  $('nav a').removeClass('active');
  $(this).toggleClass('active');
});
/* Foundation Properties */
nav {
  display: flex;
}
nav a {
  flex: 0 0 auto;
  text-align: center;
}
nav a:first-child {
  flex: 1 0 auto;
  text-align: right;
}

/* Fluff Properties */
body {
  background: #f5f5f5;
  margin: 0;
}
nav {
  max-width: 900px;
  margin: 0 auto;
  background: #3f51b5;
}
nav a {
  font-family: Helvetica;
  color: #c5cae9;
  font-size: 0.8em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: solid 2px #3f51b5;
  padding: 4em 1em 0;
  transition: all 0.5s;
}
nav a.active {
  color: #fce4ec;
  border-bottom: solid 2px #fce4ec;
}
nav a:hover {
  color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
  <a href="#" class="active">Fill</a>
  <a href="#">Item</a>
  <a href="#">Item</a>
  <a href="#">Item</a>
</nav>

Ответ 5

Решение с использованием таблиц

<style type="text/css">

#menubar {
    width:100%;
}

.FillBar {
    width:100%;
    text-align:right;
    background-color:gray
}

</style>



<table id="menubar">
<tr>
<td class="FillBar">Fill</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
</table>

Просто добавьте стиль (padding/spacingp/etc) или все, что вам нужно...

Ответ 6

Подобно тому, о чем говорит @cjezowicz, вы можете использовать white-space вместе с созданием одной ячейки width: 100% для достижения эффекта, который вы ищете:

<div id="row">
   <div class="cell fill">Fill</div>
   <div class="cell shrink">Item</div>
   <div class="cell shrink">Item</div>
   <div class="cell shrink">Item</div>
   <div class="cell shrink">Item</div>
</div>

<style type="text/css">

   div#row { display: table; width: 100%; }

   div.cell { display: table-cell; text-align: center; vertical-align: middle; }

   div.cell.fill { width: 100%; }

   div.cell.shrink { white-space: pre; }

</style>

Затем, если вам нужно принудительно установить ширину набора для любой из усохших ячеек, используйте min-width в этой ячейке.