Nano Hash - криптовалюты, майнинг, программирование

Центрированный табличный макет со столбцами одинаковой ширины с использованием CSS?

На веб-странице у меня есть ряд кнопок отправки.

  • Этот ряд кнопок должен располагаться по центру страницы.
  • Каждая кнопка должна быть такой же ширины, как и самая широкая кнопка (т. е. без фиксированной/жестко закодированной ширины кнопок).

Это легко сделать с помощью <table>, но поскольку люди продолжают говорить мне, что это плохо для вас, я подумал, можно ли это сделать с помощью CSS. Итак, я попробовал классы CSS display: table и table-cell, но либо кнопки не имеют одинаковой ширины, либо заголовок самой длинной кнопки обрезается:

.button-row {
    display: table;
    margin: auto;
    table-layout: fixed;
}
.button-row button {
    white-space: nowrap;
    display: table-cell;
    width: 50%;
}

<div class="button-row" >
    <button>Short caption</button>
    <button>A much longer caption</button>
</div>

Обрезанный заголовок кнопки

На самом деле, это выглядит корректно в IE, но не в Chrome и Firefox. Вот пример моей попытки с таблицей и CSS:

http://jsfiddle.net/kfwhpre8/

Если есть возможность, хотелось бы избавиться от width: 50% настроек, т.к. количество кнопок может варьироваться, но это достаточно легко подсчитать.

html css html-table css-tables
29.10.2014

Ответы:


1

Глядя на свою скрипку, имейте в виду, что в настольной версии buttons содержатся в tds. В этом суть проблемы. Похоже, использование table-cell на кнопках напрямую проблематично. Если вы не против изменить свой HTML, вы можете попробовать:

<div class="button-row">
    <div>
        <button>Short caption</button>
    </div>
    <div>
        <button>A much longer caption</button>
    </div>
</div>


.button-row {
    display: table;
    margin: auto;
    table-layout: fixed;
}

.button-row>div {
    display: table-cell;
    width: 50%;
}

.button-row button {
    width:100%;
}

Скрипка

29.10.2014
  • Большое спасибо, это работает! Есть идеи, можно ли это сделать без указания процента для каждой кнопки? 30.10.2014

    • 2

    возможно, это не тот ответ, который вы ищете, поскольку вы сказали, что хотите избавиться от width:50%

    Если вы установите width:100% в button-row button{}all, кнопки будут такими же широкими, как и самая широкая кнопка.

    .button-row button {
   display: table-cell;
   width: 100%;
}
    29.10.2014
  • Это звучит как хороший ответ, но ваша ссылка ведет на мой оригинальный JSFiddle, поэтому я не вижу вашего решения. 30.10.2014
  • Извините, моя ошибка просто добавит код для изменения в мой ответ. 30.10.2014
  • Если я это сделаю, вторая кнопка будет размещена под первой, а не рядом. Скрипт: jsfiddle.net/kfwhpre8/2 30.10.2014

    • 3

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

    По крайней мере, в текущей форме HTML.

    .button-row button {
    display: table-cell;
    width: 150px;
    margin: 1px;
}

    Скрипт: http://jsfiddle.net/kfwhpre8/3/

    29.10.2014
  • Извините, это именно то, чего я пытаюсь избежать :) 30.10.2014
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..