Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Alex's answer has one great drawback — multiline text in the <code>.food</code> hides bottom line.</p> <p>Also there is a good old answer: <a href="http://www.search-this.com/2007/11/26/css-a-recipe-for-success/" rel="nofollow">http://www.search-this.com/2007/11/26/css-a-recipe-for-success/</a> (<a href="http://www.pmob.co.uk/search-this/list-with-dotted-leader7.htm" rel="nofollow">demo</a>)</p> <p>Here is live demo of a little modified old solution (try to resize): <a href="http://cssdesk.com/BqR96" rel="nofollow">http://cssdesk.com/BqR96</a></p> <p>And modified css: </p> <pre><code>.restaurant_menu__list { min-width: 320px; /* For mobile devices */ max-width: 500px; /* Custom max width for readbility */ } .restaurant_menu__row { border-bottom: 2px dotted #B5ABAB; /* Our dotted line, we can use border-image instead */ position: relative; float: left; line-height: 1.2em; margin: -.9em 0 0 0; width: 100%; text-align: left; } .restaurant_menu__meal span , .restaurant_menu__price { background-color: #FFF; /* For .restaurant_menu__row background rewriting */ } .restaurant_menu__meal { padding-right: 3em; /* Custom number for space between text and right side of .restaurant_menu__row; must be greater than .restaurant_menu__price max-width to avoid overlapping */ } .restaurant_menu__meal span { margin:0; position:relative; top: 1.6em; padding-right:5px; /* Custom number for space between text and dotted line */ } .restaurant_menu__price { padding:1px 0 1px 5px; position:relative; top:.4em; left:1px;/* ie6 rounding error*/ float:right; } </code></pre> <p>And modified html: </p> <pre><code>&lt;ul class="restaurant_menu__list"&gt; &lt;li class="restaurant_menu__row"&gt; &lt;!-- Inside div we need inline element, to handle multiline meals --&gt; &lt;div class="restaurant_menu__meal"&gt;&lt;span&gt;Crab Cakes with corn, roasted red pepper, and ginger vinaigrette&lt;/span&gt;&lt;/div&gt; &lt;span class="restaurant_menu__price"&gt;€25&lt;/span&gt; &lt;/li&gt; &lt;li class="restaurant_menu__row"&gt; &lt;div class="restaurant_menu__meal"&gt;&lt;span&gt;French Onion Soup&lt;/span&gt;&lt;/div&gt; &lt;span class="restaurant_menu__price"&gt;€32&lt;/span&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload