    ul li{
      display: inline;
    }

For more see the &lt;a href=&quot;http://css.maxdesign.com.au/listamatic/&quot;&gt;basic list options&lt;/a&gt;  and &lt;a href=&quot;http://css.maxdesign.com.au/listamatic/horizontal01.htm&quot;&gt;a basic horizontal list&lt;/a&gt; at listamatic.  (thanks to &lt;a href=&quot;https://stackoverflow.com/users/65393/daniel-straight&quot;&gt;Daniel Straight&lt;/a&gt; below for the links).

Also, as pointed out in the comments, you probably want styling on the ul and whatever elements go inside the li&#39;s and the li&#39;s themselves to get things to look nice.

In modern browsers you can do the following (CSS3 compliant)

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    ul
    {
      display:flex;  
      list-style:none;
    }

&lt;!-- language: lang-html --&gt;

    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Item1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Item2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Item3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

&lt;!-- end snippet --&gt;



HTML code:

    &lt;ul class=&quot;list&quot;&gt;
      &lt;li&gt;Item 1&lt;/li&gt;
      &lt;li&gt;Item 2&lt;/li&gt;
      &lt;li&gt;Item 3&lt;/li&gt;
    &lt;/ul&gt;


CSS code:

    ul.list li{
      width: auto;
      float: left;
    }

Try experimenting with something like this also:

&gt; HTML

     &lt;ul class=&quot;inlineList&quot;&gt;
       &lt;li&gt;She&lt;/li&gt;
       &lt;li&gt;Needs&lt;/li&gt;
       &lt;li&gt;More Padding, Captain!&lt;/li&gt;
     &lt;/ul&gt;

&gt; CSS

     .inlineList {
       display: flex;
       flex-direction: row;
       /* Below sets up your display method: flex-start|flex-end|space-between|space-around */
       justify-content: flex-start; 
       /* Below removes bullets and cleans white-space */
       list-style: none;
       padding: 0;
       /* Bonus: forces no word-wrap */
       white-space: nowrap;
     }
     /* Here, I got you started.
     li {
       padding-top: 50px;
       padding-bottom: 50px;
       padding-left: 50px;
       padding-right: 50px;
     }
     */

I made a codepen to illustrate: http://codepen.io/agm1984/pen/mOxaEM


in **bootstrap** use ```.list-inline``` css class

    &lt;ul class=&quot;list-inline&quot;&gt;
        &lt;li&gt;Coffee&lt;/li&gt;
        &lt;li&gt;Tea&lt;/li&gt;
        &lt;li&gt;Milk&lt;/li&gt;
    &lt;/ul&gt;

Ref: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_txt_list-inline&amp;stacked=h

Is there any way to determine a string&#39;s encoding in C#?

Say, I have a filename string, but I don&#39;t know if it is encoded in &lt;strike&gt;Unicode&lt;/strike&gt; UTF-16 or the system-default encoding, how do I find out?



Determine a string&#39;s encoding in C#

I have an Orders table which has a Quantity column. During check in or check out, we need to update that Quantity column by one. Is there a way to do this in one action or we have to get the existing value and then add or minus one on top of it?


Another question is when we insert a new row, do we need to check if same data existing then insert if not, which is two steps, or is there a better way to do this?

thanks,

SQL how to increase or decrease one for a int column in one command

I want to render this list in a single line.

 - List item1
 - List item2

Should be shown as 

 *List item2 *List item2

What CSS style to use?



How to style the UL list to a single line

I want to render this list in a single line.
<ul>
<li>List item1</li>
<li>List item2</li>
</ul>
Should be shown as
*List item2 *List item2
What CSS style to use?

How can I select the link elements of only the parent `&lt;ul&gt;` from a list like this? 

    &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

So in css `ul li a`, but not `ul li ul li a`

Thanks

Selecting only first-level elements in jquery

How can I place some HTML element (say, a `&lt;div&gt;`, for example) in the middle of a browser window (not page, not screen)? Not depending on browser window size, screen resolution, toolbar layout, etc. E.g. I want it to be in the middle of the **browser window**.

How to center an element in the middle of the browser window?

I&#39;m very new to HTML and CSS and I was just wondering how I could make my font bold using CSS.

I have a plain HTML page that imports a CSS file, and I can change the font in the CSS. But I don&#39;t know how to make the font bold, can anyone help me?

How to make my font bold using css?

I&#39;m trying to use CSS to create a &#39;greyed out&#39; effect on my page while a loading box is displayed in the foreground while the application is working. I&#39;ve done this by creating a 100% height/width, translucent black div which has its visibility toggled on/off via javascript. I thought this would be simple enough; however, when the page content expands to the point that the screen scrolls, scrolling to the foot of the page reveals a portion which is not greyed out. In other words, the 100% in the div&#39;s height seems to be applying to the browser viewport size, not the actual page size. How can I make the div expand to cover the whole of the page&#39;s content? I&#39;ve tried using JQuery .css(&#39;height&#39;, &#39;100%&#39;) before toggling it&#39;s visibility on but this doesn&#39;t change anything.

This is the CSS of the div in question:

    div.screenMask
    {
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	width: 100%;
    	height: 100%;
    	z-index: 1000;
    	background-color: #000000;
    	opacity: 0.7;
    	filter: alpha(opacity=70);
    	visibility: hidden;
    }

Thanks.

How to make a div 100% of page (not screen) height?

I&#39;m looking for a way using jQuery to return an object of computed styles for the 1st matched element. I could then pass this object to another call of jQuery&#39;s css method.

For example, with [width][1], I can do the following to make the 2 divs have the same width:

    $(&#39;#div2&#39;).width($(&#39;#div1&#39;).width());

It would be nice if I could **make a text input look like an existing span**:

    $(&#39;#input1&#39;).css($(&#39;#span1&#39;).css());

where .css() with no argument returns an object that can be passed to [.css(obj)][2].

(I can&#39;t find a jQuery plugin for this, but it seems like it should exist. If it doesn&#39;t exist, I&#39;ll turn mine below into a plugin and post it with all the properties that I use.) 

Basically, I want to pseudo clone certain elements **but use a different tag**. For example, I have an li element that I want to hide and put an input element over it that looks the same. When the user types, **it looks like they are editing the element inline**.

**I&#39;m also open to other approaches for this pseudo cloning problem for editing.** Any suggestions?

Here&#39;s what I currently have. The only problem is just getting all the possible styles. This could be a ridiculously long list.

----------


    jQuery.fn.css2 = jQuery.fn.css;
    jQuery.fn.css = function() {
        if (arguments.length) return jQuery.fn.css2.apply(this, arguments);
        var attr = [&#39;font-family&#39;,&#39;font-size&#39;,&#39;font-weight&#39;,&#39;font-style&#39;,&#39;color&#39;,
		&#39;text-transform&#39;,&#39;text-decoration&#39;,&#39;letter-spacing&#39;,&#39;word-spacing&#39;,
		&#39;line-height&#39;,&#39;text-align&#39;,&#39;vertical-align&#39;,&#39;direction&#39;,&#39;background-color&#39;,
		&#39;background-image&#39;,&#39;background-repeat&#39;,&#39;background-position&#39;,
		&#39;background-attachment&#39;,&#39;opacity&#39;,&#39;width&#39;,&#39;height&#39;,&#39;top&#39;,&#39;right&#39;,&#39;bottom&#39;,
		&#39;left&#39;,&#39;margin-top&#39;,&#39;margin-right&#39;,&#39;margin-bottom&#39;,&#39;margin-left&#39;,
		&#39;padding-top&#39;,&#39;padding-right&#39;,&#39;padding-bottom&#39;,&#39;padding-left&#39;,
		&#39;border-top-width&#39;,&#39;border-right-width&#39;,&#39;border-bottom-width&#39;,
		&#39;border-left-width&#39;,&#39;border-top-color&#39;,&#39;border-right-color&#39;,
		&#39;border-bottom-color&#39;,&#39;border-left-color&#39;,&#39;border-top-style&#39;,
		&#39;border-right-style&#39;,&#39;border-bottom-style&#39;,&#39;border-left-style&#39;,&#39;position&#39;,
		&#39;display&#39;,&#39;visibility&#39;,&#39;z-index&#39;,&#39;overflow-x&#39;,&#39;overflow-y&#39;,&#39;white-space&#39;,
		&#39;clip&#39;,&#39;float&#39;,&#39;clear&#39;,&#39;cursor&#39;,&#39;list-style-image&#39;,&#39;list-style-position&#39;,
		&#39;list-style-type&#39;,&#39;marker-offset&#39;];
        var len = attr.length, obj = {};
        for (var i = 0; i &lt; len; i++) 
            obj[attr[i]] = jQuery.fn.css2.call(this, attr[i]);
        return obj;
    }

Edit: I&#39;ve now been using the code above for awhile. It works well and behaves exactly like the original css method with one exception: if 0 args are passed, it returns the computed style object. 

As you can see, it immediately calls the original css method if that&#39;s the case that applies. Otherwise, it gets the computed styles of all the listed properties (gathered from Firebug&#39;s computed style list). Although it&#39;s getting a long list of values, it&#39;s quite fast. Hope it&#39;s useful to others.

  [1]: http://docs.jquery.com/CSS/width
  [2]: http://docs.jquery.com/CSS/css#properties


Content Type	Original Author	Original Content on Stackoverflow
Question	R.D	View Question on Stackoverflow
Solution 1 - Css	rz.	View Answer on Stackoverflow
Solution 2 - Css	davidlbaileysr	View Answer on Stackoverflow
Solution 3 - Css	adel aaji	View Answer on Stackoverflow
Solution 4 - Css	agm1984	View Answer on Stackoverflow
Solution 5 - Css	Matee Gojra	View Answer on Stackoverflow

How to style the UL list to a single line

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Solution 3 - Css

Solution 4 - Css

Solution 5 - Css

SQL how to increase or decrease one for a int column in one command

Determine a string's encoding in C#

Attributions