Category: Blog

Equal placement of list items horizontally from left edge to right edge

I wanted to place <li> elements which I used in a horizontal menu to be distributed evenly across the full width of the parent element <ul>.  I used to float my elements from left and add margins for the space in between the each element or I used to display:inline-block;  <li> elements and give text-align:center; to the parent <ul>. 

But again it places the items in middle, this was not I was looking for I wanted to distribute the items in complete width form left edge to the right edge.

Following is the css you can use to simply arrange the items from left to the right edge with equal spacing.

ul{ display:block; clear:both; width:70%; display: flex; justify-content: space-between; padding:0; }


display:flex; and justify-content:space-between will do the magic for you.

Dashed or Dotted line in Photoshop

Simply Select a brush tool, then select the size of the brush as per your need.  If you need a dotted line, use a round brush, if you need a dashed line, you have to load the Square Brushes library.
      To load the Square Brushes library, click on the brush size icon in the options bar, then click on the fly-out menu (that arrow icon as shown in the image) and select Square Brushes.

Then access the Brushes palette, click on the ‘Brush Tip Shape’.  This will display all the settings, there you can change the Spacing setting to a high value (200 or more).  You will see the preview right there at the bottom of Brushes Palette. The Brush Palette will look like this:

Now you are done with the settings  you can a draw a dashed line, Hold on the SHIFT key and draw the line,  Shift key ensures a straight line.  I used this dashed line for one of many banners I designed.  You should try this.