Как поместить эти кнопки в одну строку с помощью CSS?

Я работал над этим расширением и пытаюсь разместить эти кнопки в одном месте, но они выглядят так. Они не выстраиваются

Как поместить эти кнопки в одну строку с помощью CSS?

.fversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: left;
  float: left;
}

.sversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: middle;
  float: center;
}

.tversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: right;
  float: right;
}
<a href = "2048/index.html" class = "fversion-button">2048</a>
<a href = "16384/index.html" class = "sversion-button">16384</a>
<a href = "65536/index.html" class = "tversion-button">65536</a>

Я новичок в CSS.

ваши свойства вертикального выравнивания хотят быть такими же - в настоящее время они недействительны - как вы вертикально выровняете что-то по горизонтали (то есть влево и вправо !?)

Pete 27.03.2018 13:00

Когда вы пишете здесь вопросы, постарайтесь, чтобы ваш материал был лаконичным. Примеры «пожалуйста, помогите мне» и «я застрял на X часов» - это формы попрошайничества и мольбы, которые могут принести вам отрицательные голоса. Лучше всего сформулировать вопрос и описать, что вы пытались исправить.

halfer 31.03.2018 12:41

Использование txtspk также не рекомендуется в вопросах, поскольку это затрудняет их чтение. В результате это также может привлечь голоса против.

halfer 31.03.2018 12:43
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
3
50
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

есть нет CSS вроде

float: center

  • который записан в классе .sversion-button. вы должны заменить его на

float: left.

Думаю, вам нужно будет поставить кнопку в нужное вам положение.

чувак, это работает, но не добавляет места, как Пит

Tasi 27.03.2018 13:17

вы можете добавить интервал между кнопками, добавив свойство margin.

Kaustavi Banerjee 27.03.2018 13:51
Ответ принят как подходящий

Я бы отказался от использования float и сделал их встроенными блочными элементами. Также удалите вертикальное выравнивание или сделайте их все посередине (левое и правое не являются допустимыми значениями для вертикального выравнивания)

.fversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: middle;
  display:inline-block;
}

.sversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: middle;
  display:inline-block;
}

.tversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: middle;
  display:inline-block;
}
<a href = "2048/index.html" class = "fversion-button">2048</a>
<a href = "16384/index.html" class = "sversion-button">16384</a>
<a href = "65536/index.html" class = "tversion-button">65536</a>

Если вам нужно разделить их по линии, вы можете поместить их в гибкий контейнер:

.container {                         /* flex for even spacing */
  display: flex;
  justify-content: space-between;
}

/* shared styles - could use a class on each button for shared styles instead of repeating (i have just used the extra selector I made from the container) */
.container > a {  
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);  
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;                 
<div class = "container">
  <a href = "2048/index.html" class = "fversion-button">2048</a>
  <a href = "16384/index.html" class = "sversion-button">16384</a>
  <a href = "65536/index.html" class = "tversion-button">65536</a>
</div>

не знаю почему, но кнопка в центре чуть ниже остальных кауставис один сработал

Tasi 27.03.2018 13:10

В исходном коде должны быть какие-то другие стили, которые его перезаписывают - как вы можете видеть из обоих приведенных выше фрагментов, все они идеально выровнены.

Pete 27.03.2018 13:12

на самом деле ваш тоже работает. bc vertical-align было посередине, что было неправильно, я должен был написать центр, когда использовал ваш

Tasi 27.03.2018 13:16

спасибо, чувак, я буду использовать этот код, потому что он ставит пробел между кнопками

Tasi 27.03.2018 13:16

Не беспокойтесь - вертикальное выравнивание по центру недействительно - вам нужно установить все на середину - developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Pete 27.03.2018 13:17

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

Tasi 27.03.2018 13:19

Что будет, если его убрать? Возможно, лучше всего просто удалить его - это, вероятно, будет действовать так же, как center, и уменьшит раздувание css

Pete 27.03.2018 13:19

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

Tasi 27.03.2018 13:24

Можете ли вы создать пример проблемы рабочий пример - я посмотрю и дам вам знать, почему происходит вертикальное движение

Pete 27.03.2018 13:26

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

Tasi 27.03.2018 13:28

А, верно, я думаю, проблема заключалась в том, что у вас была пара плавающих элементов, а одного нет (из-за плавающего центра), а затем у вас было одно вертикально выровненное по середине и 2 по базовой линии (недопустимые левые и правые по умолчанию для базовой линии)

Pete 27.03.2018 13:29

Вам нужно удалить центр float и внести изменения в html и css, вы получите это

.fl1{
  float:left;
  width:33.33%;
  margin:5px auto;
}
.fl2{
  float:left;
  width:33.33%;
  text-align:center;
  margin:5px auto;
}
.fl3{
  float:left;
  width:33.33%;
  text-align:right;
  margin:5px auto;
}
.fversion-button {
     border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;


color: #ffffff;
   text-decoration: none;
   vertical-align: middle;
   }


.sversion-button {
    border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   color: #ffffff;


   text-decoration: none;
   vertical-align: middle;
   }  


.tversion-button {
    border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   color: #ffffff;


   text-decoration: none;
   vertical-align: right;
}
<div class = "fl1">
<a href = "2048/index.html" class = "fversion-button">2048</a>
</div>
<div class = "fl2">
       <a href = "16384/index.html" class = "sversion-button">16384</a>
</div>
<div class = "fl3">
   <a href = "65536/index.html" class = "tversion-button">65536</a>
</div>

добавьте display:inline-block; для тега a и установите все кнопки на float:left

a{
  display:inline-block;
}
.fversion-button {
     border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;


color: #ffffff;
   text-decoration: none;
   vertical-align: left;
   float: left;
   }


.sversion-button {
    border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   color: #ffffff;


   text-decoration: none;
   vertical-align: middle;
   float: left;
   }  


.tversion-button {
    border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   color: #ffffff;


   text-decoration: none;
   vertical-align: right;
   float: left;
}
<a href = "2048/index.html" class = "fversion-button">2048</a>
       <a href = "16384/index.html" class = "sversion-button">16384</a>
   <a href = "65536/index.html" class = "tversion-button">65536</a>

/* Replace all css with this one css for all buttons */

.demo_btn {
   border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   color: #ffffff;
   text-decoration: none;
   vertical-align: middle;
   display: inline-block;
}
<!-- Add common class to all buttons -->

<a href = "2048/index.html" class = "fversion-button demo_btn">2048</a>
<a href = "16384/index.html" class = "sversion-button demo_btn">16384</a>
<a href = "65536/index.html" class = "tversion-button demo_btn">65536</a>

Другие вопросы по теме