Как добавить увеличивающиеся размеры полей в ряд кнопок? - PullRequest
Новая
       50

Как добавить увеличивающиеся размеры полей в ряд кнопок?

0 голосов
/ 05 сентября 2018

Я пытаюсь создать ряд кнопок с увеличенными размерами влево.

Например: 

[b1]--[b2]-----[b3]-------[b4]

пусть '-' будет пробелом. Я не мог понять форматирование, чтобы иметь последовательные пробелы в стеке потока ... Как вы можете видеть, b1 будет иметь margin-left of 10%, b2 20%, b3 40% и b4 80%.

Тем не менее, похоже, что левые запаса накапливаются так, что b2 будет иметь в общей сложности margin-left of 30% и b3 a total of 70% и так далее ...

Моя цель - расположить каждую кнопку на определенном расстоянии от самой левой части экрана. Я пытаюсь сделать это, используя margin-left. Однако, поскольку кнопки находятся в одном и том же элементе div, я считаю, что это приводит к накоплению значений поля слева и, таким образом, значение поля слева слева всегда будет накапливаться со значениями поля слева предыдущей кнопки.

Это всего лишь моя гипотеза о том, что происходит, но код не выполняет то, что я имею в виду: каждая кнопка должна находиться на определенном расстоянии от левой стороны. Например b1 should be 10% слева. b2 should be 20% слева. По сути, я хочу, чтобы все кнопки начинались с левого края с самого начала.

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

HTML: 

<div class='outer'>
    <div class='inner'>
        <div class='buttons'> 
            <button>b1<button/> 
            <button>b2<button/> 
            <button>b3<button/> 
            <button>b4<button/>  
        </div>
    </div>
</div>

CSS: 

outer { width: 100% }
inner { width: 100% }
buttons { width: 100% } 
b1 { margin-left: 10%}
b2 { margin-left: 20%}
b3 { margin-left: 40%}
b4 { margin-left: 80%}

Ответы [ 2 ]

0 голосов
/ 05 сентября 2018

То, что вы ищете, это «позиция: абсолютная» (или «позиция: фиксированная» в некоторых случаях).

Вы можете применить свойство «absolute» к каждой из кнопок, как показано ниже, это сделает положение каждой кнопки абсолютным (т.е. не основанным на положении предыдущей кнопки, как в вашем примере). Подробнее об абсолютном позиционировании вы можете прочитать здесь: https://www.w3schools.com/css/css_positioning.asp

Как вы упомянули, в этом примере ваш код немного отключен, поэтому я укажу, что у вас отсутствуют закрывающие теги в ваших элементах div, тег закрывающей кнопки неверен и ваш синтаксис CSS отключен.

Приведенный ниже код должен решить вашу проблему: 

.buttons button {position: absolute}
.b1 { margin-left: 10%}
.b2 { margin-left: 20%}
.b3 { margin-left: 40%}
.b4 { margin-left: 80%}
<div class='buttons'> 
    <button class='b1'>b1</button> 
    <button class='b2'>b2</button> 
    <button class='b3'>b3</button> 
    <button class='b4'>b4</button>  
</div>

Обратите внимание: вы также можете заменить «абсолютный» на «фиксированный» в приведенном выше примере для того же эффекта. Свойство «absolute» будет располагать его к ближайшему расположенному предку (то есть, если вы должны были переставить внешние / внутренние элементы div), тогда как «Fixed» всегда будет располагаться относительно порта просмотра.

Надеюсь, это поможет!

0 голосов
/ 05 сентября 2018

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

<div class='outer'>
<div class='inner'> 
</div>
<div class='buttons'> 
</div>
</div>

outer {
   width: 100%;
}

inner {
   width: 100%;
}

buttons {
   width: 100%;
}

.one {
   width: 10%;
}

.two {
   width: 20%;
 }

.three {
   width: 40%;
}

.four {
   width: 80%;
 }
...