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

.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.
Когда вы пишете здесь вопросы, постарайтесь, чтобы ваш материал был лаконичным. Примеры «пожалуйста, помогите мне» и «я застрял на X часов» - это формы попрошайничества и мольбы, которые могут принести вам отрицательные голоса. Лучше всего сформулировать вопрос и описать, что вы пытались исправить.
Использование txtspk также не рекомендуется в вопросах, поскольку это затрудняет их чтение. В результате это также может привлечь голоса против.






есть нет CSS вроде
float: center
float: left.
Думаю, вам нужно будет поставить кнопку в нужное вам положение.
чувак, это работает, но не добавляет места, как Пит
вы можете добавить интервал между кнопками, добавив свойство margin.
Я бы отказался от использования 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>не знаю почему, но кнопка в центре чуть ниже остальных кауставис один сработал
В исходном коде должны быть какие-то другие стили, которые его перезаписывают - как вы можете видеть из обоих приведенных выше фрагментов, все они идеально выровнены.
на самом деле ваш тоже работает. bc vertical-align было посередине, что было неправильно, я должен был написать центр, когда использовал ваш
спасибо, чувак, я буду использовать этот код, потому что он ставит пробел между кнопками
Не беспокойтесь - вертикальное выравнивание по центру недействительно - вам нужно установить все на середину - developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
хмм, это странно, когда я использую середину, он соединяет кнопки, но когда я использую центр, он добавляет пробелы между кнопками
Что будет, если его убрать? Возможно, лучше всего просто удалить его - это, вероятно, будет действовать так же, как center, и уменьшит раздувание css
хм, если я удалю код, он сделает то же самое с кодом, которого не было час назад. Ничего себе, все стало очень странно, поэтому мне не нужен код вертикального выравнивания
Можете ли вы создать пример проблемы рабочий пример - я посмотрю и дам вам знать, почему происходит вертикальное движение
Просто странно, что когда я не использовал код вертикального выравнивания, была проблема час назад, теперь я не использую его сейчас, он работает, что
А, верно, я думаю, проблема заключалась в том, что у вас была пара плавающих элементов, а одного нет (из-за плавающего центра), а затем у вас было одно вертикально выровненное по середине и 2 по базовой линии (недопустимые левые и правые по умолчанию для базовой линии)
Вам нужно удалить центр 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>
ваши свойства вертикального выравнивания хотят быть такими же - в настоящее время они недействительны - как вы вертикально выровняете что-то по горизонтали (то есть влево и вправо !?)