asked    Stan     2018-10-22       html       8 view        2 Answers

[SOLVED] How to add increasing margin sizes to a row of buttons?

I am trying to create a row of buttons which have increasing margin-left sizes.

For example:

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

let '-' be whitespace. I couldn't figure out the formatting to have consecutive spaces on stackoverflow... As you can see, b1 will have a margin-left of 10%, b2 20%, b3 40% and b4 80%.

However, it looks like the margin-lefts are accumulating such that b2 will have a total margin-left of 30% and b3 a total of 70% and so on...

My objective is to have each button be positioned a certain distance away from the very left of the screen. I am trying to accomplish that by using margin-left. However, since the buttons are in the same div, I believe that makes the margin-left values accumulate and thus the next button's margin-left value will always be accumulated with the previous button's margin-left values.

That is just my conjecture on what's happening but the code is not doing what I have in mind: each button should be a certain distance away from the left. For example b1 should be 10% from the left. b2 should be 20% from the left. Essentially, I want all the button to start margin-left from the very beginning.

So here's the code. Please excuse any pseudocode as I'm typing this up here because I'm on another machine that doesn't have my sourcecode.

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 Answers  

        answered    Ophelia     2018-10-22      

What you are looking for is "position: absolute" (or "position: fixed" in some cases).

You can apply the "absolute" property to each of the buttons as shown below, this will make each buttons position absolute (i.e. not based on the position of the previous button, as in your example). You can read more about absolute positioning here:

As you mentioned, your code is a little off in this example, so I will point out you are missing closing tags on your divs, your closing button tag is incorrect and your CSS syntax is off.

The below code should solve your issue:

.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>


        answered    Chasel     2018-10-22      

To begin with your divs are not closed properly, below is an example of your code with the closing divs, also try organizing your code more properly for others to read, not sure if this answered your question since I couldn't really get the question on what you were trying to accomplish.

<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%;
 }




Your Answer





 2018-10-22         Lester

How to initialize Multiple List<string> by using a given name List<string>

Is there a function I can use to initialize Multiple List by using a given name List?For example:List<string> nw_TCList = new List<string>();List<string> ia_TCList = new List<string>();List<string> st_TCList = new List<string>();List<string> ud_TCList = new List<string>();List<string> mb_TCList = new List<string>();I would like to create thoese List, right now i have a List contains thoese name:List<string> myNameList = new List<string>() { "nw_TCList", "ia_TCList", "st_TCList", "ud_TCLis...
 c#                     3 answers                     84 view
 2018-10-22         Payne

Change (map) JSON list shape - add tag to objects in TypeScript

I am trying to change in my Angular (TypeScript) project a JSON list received through a REST request.The initial JSON looks like this: [ { "id":1, "position":3, "articleNumber":6 }, { "id":2, "position":2, "articleNumber":7 }]I need it to become:{ "data":[ { "data":{ "id":1, "position":3, "articleNumber":6 } }, { "children":[ { "data":{ "id":2, "position":2, "articleN...
 json                     2 answers                     88 view
 2018-10-22         Bblythe

Reading tsv column and store in a dictionary resulting in None values

I have a tsv file with the following format:first 44 90 orgsecond 80 49 sportthird 50 52 NILThe file was written by the following code:id = firstbefore = 44after = 90taregt = orgwith open('/path/to/file.tsv', 'w') as f: result = u'\t'.join([ id, Before, After, target]) f.write(result+'\n')And i would like to read the two middle columns into two dictionaries as value and the first column as a key. I have the following sample compilable code however it stores the values as None.start = {}end = {}with open('/path/to/file.tsv', 'r...
 python                     2 answers                     86 view