Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I'd suggest:</p> <pre><code>div { width: 48%; float: left; } </code></pre> <p><a href="http://jsfiddle.net/davidThomas/qTY3h/6/" rel="nofollow">JS Fiddle demo</a>.</p> <p>Or, if your users have a compliant browser, you can set the <code>width</code> to <code>50%</code>, using <code>box-sizing</code> to contain the <code>padding</code> and <code>border-width</code> within the defined <code>width</code> of the element:</p> <pre><code>div { width: 50%; float: left; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } </code></pre> <p><a href="http://jsfiddle.net/davidThomas/qTY3h/5/" rel="nofollow">JS Fiddle demo</a>.</p> <p>Similarly, given compliant browsers, you could instead use the <code>column-count</code> property to define a specific number of columns, into which the browser will fit the content. For this to work I've wrapped your current (hideously invalid) html in another element, with an <code>id</code> of 'wrapper':</p> <pre><code>#wrapper { -moz-column-count: 2; -ms-column-count: 2; -o-column-count: 2; -webkit-column-count: 2; column-count: 2; } </code></pre> <p><a href="http://jsfiddle.net/davidThomas/qTY3h/4/" rel="nofollow">JS Fiddle demo</a>.</p> <p>If you have the option of only requiring Webkit and Opera support, and perhaps your users have enabled flex-box support in their Firefox installation, then using the CSS flex-box model becomes an option, though again requires a wrapping element to contain the two menu elements, with the following CSS:</p> <pre><code>#wrapper { display: -webkit-flex; -webkit-flex-direction: row; -webkit-flex-wrap: nowrap; } #wrapper &gt; div { display: -webkit-flex-inline; -webkit-flex: 1 1 auto; } </code></pre> <p><a href="http://jsfiddle.net/davidThomas/qTY3h/7/" rel="nofollow">JS Fiddle demo</a>.</p> <blockquote> <p>Note: WebKit implementation must be prefixed with <code>-webkit</code>; Gecko implementation is unprefixed but behind a preference (except if you are using Nightly); Internet Explorer implements an old version of the spec, prefixed; Opera 12.10 implements the latest version of the spec, unprefixed.</p> </blockquote> <hr> <h3>The invalid mark-up</h3> <pre><code>&lt;div id="menu1"&gt; &lt;ul&gt; &lt;a href="#"&gt; &lt;li&gt; one&lt;/li&gt; &lt;/a&gt; &lt;a href="#"&gt; &lt;li&gt; two&lt;/li&gt; &lt;/a&gt; &lt;a href="#"&gt; &lt;li&gt; three&lt;/li&gt; &lt;/a&gt; &lt;a href="#"&gt; &lt;li&gt; four &lt;/li&gt; &lt;/a&gt; &lt;a href="#"&gt; &lt;li&gt; five&lt;/li&gt; &lt;/a&gt; &lt;a href="#"&gt; &lt;li&gt;six &lt;/li&gt; &lt;/a&gt; &lt;a href="#"&gt; &lt;li&gt; seven &lt;/li&gt; &lt;/a&gt; &lt;a href="#"&gt; &lt;li&gt; eight &lt;/li&gt; &lt;/a&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>The <em>only</em> valid child element of a <code>ul</code> (or an <code>ol</code>) is an <code>li</code>: no other elements are permitted within a <code>ul</code> or <code>ol</code> <em>unless</em> they're wrapped in an <code>li</code> element. So, to correct your HTML, it should be:</p> <pre><code>&lt;div id="menu1"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;one&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;two&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;three&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;four&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;five&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;six&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;seven&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;eight&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>If the purpose of wrapping the <code>li</code> with an <code>a</code> was to make the clickable area of the <code>a</code> element fill the <code>li</code>, then simply use <code>a { display: block; }</code></p> <p>References:</p> <ul> <li><a href="http://demo.agektmr.com/flexbox/" rel="nofollow">CSS Flexbox Please! (Flexbox playground/demo)</a>.</li> <li><a href="http://www.w3.org/TR/css3-flexbox/" rel="nofollow">CSS Flexible Box Layout Module (W3.org)</a>.</li> <li><a href="https://developer.mozilla.org/en-US/docs/CSS/box-sizing" rel="nofollow"><code>box-sizing</code></a>.</li> <li><a href="https://developer.mozilla.org/en-US/docs/CSS/float" rel="nofollow"><code>float</code></a>.</li> <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes" rel="nofollow">'Using CSS Flexible Boxes' (MDN)</a>.</li> </ul>
    singulars
    1. This table or related slice is empty.
    1. POconverting a div element into inline in css
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USDavid Thomas
    1. USDavid Thomas
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. CObut in both ways answer is same either <li> inside <a> or <a> inside <li> please tell me what are the benifits of <a> inside <li>
      singulars
      1. PO
      1. USuser1745334
    2. COBrowsers will attempt to rescue broken/invalid HTML; if you supply valid HTML the browser doesn't (unpredictably) rearrange the mark-up when it's forming the DOM, which means it's easier to work with. The reason not to wrap the `li` with an `a` is simply that *it is* ***invalid*** HTML. The question becomes, then, why would you *not* want to write your HTML properly?
      singulars
      1. PO
      1. USDavid Thomas
    3. COgood it is very helping for me
      singulars
      1. PO
      1. USuser1745334
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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