html - How can I achive equal responsive padding for navigation elements? -
I am trying to create a horizontal navigation bar, which fills the screen or parent container and the same for it Horizontal padding will be the element, which will be evenly reduced on the width of the small window. Using the Display: Table-Cell I have found that it reduces well but not equal. Longer titles have more padding. I am open to any work solution, ideal CSS but if this is not possible, it will work without any speed. What can I see here so far
ul {list-style: none; Padding: 0; Width: 100%; Display: Table; Border-top: 1px solid; Border bottom: 1px solid; Border-left: 1 px solid} {boundary-right: 1 px solid; Margin: 0; Exhibit: Table Cell; Status: Relative; Text-align: center} & lt; Ul & gt; & Lt; Li & gt; Some title & lt; / Li & gt; & Lt; Li & gt; Some tall titles & lt; / Li & gt; & Lt; Li & gt; Some title & lt; / Li & gt; & Lt; / Ul & gt;
solve it (and learned a lot) Basic ideas Run through all the inventory items and calculate average padding. Then run it again again and set your width to its width + average padding.
The updated JSField has:
// average padding var totalPadding = 0; Var calculation = 0; $ ('Li'). Var (function () {var t = $ (this); var external = t. water (true); var internal = tttext width (); var padding = outer - inner; totalPadding + = outer - inner; calculation + +;}); Kulpading / = calculation; // Text width + average padding $ ('li') to each width. Each (function () {var t = $ (this); var internal = t.textWidth (); var newWidth = inner + totalPadding; t CSS ('width', nudity);}); To make it work, I had to use the Phil's textWidth () and have to hear the window resize event. See JsFiddle
Comments
Post a Comment