Creating Horizontal Lists Using Css: A Step-By-Step Guide

How to Make a List Horizontal in CSS

In CSS, creating a horizontal list can be achieved using various methods such as Flexbox, CSS Grid, inline-block, transform property, table display, float property, inline elements, list-style-type property, and custom layout. Each method has its own advantages and considerations, so let’s explore them one by one.

Flexbox Method:

Introduction to Flexbox:
Flexbox is a CSS layout module that aims to provide a more efficient way to align and distribute space among items in a container. It offers a flexible way to create both vertical and horizontal layouts.

Setting the display property to flex:
To enable Flexbox, you need to set the display property of the container to “flex”. This will automatically arrange the child elements in a row by default.

Using the flex-direction property:
To create a horizontal list, you can use the flex-direction property and set its value to “row”. This will ensure that the items are displayed in a row format.

Aligning items with the justify-content property:
You can control the alignment of the items within the container using the justify-content property. By setting it to “center”, “flex-start”, or “flex-end”, you can align the items horizontally within the container.

Aligning items with the align-items property:
To vertically align the items within the container, you can utilize the align-items property. By setting it to “center”, “flex-start”, or “flex-end”, you can align the items according to your requirement.

Controlling individual item alignment with the align-self property:
If you want to control the individual alignment of each item within the container, you can use the align-self property. By assigning values like “center”, “flex-start”, or “flex-end” to each item, you can fine-tune their alignment.

Adjusting spacing between items with the flex-wrap property:
In case you have more items than can fit within the container’s width, you can enable wrapping by using the flex-wrap property. By setting it to “wrap”, the items will wrap onto the next line, creating a horizontal list.

Wrapping the items to create a horizontal list:
To explicitly create a horizontal list, you can set the width of the container and use the flex-wrap property to wrap the items onto the next line.

Cross-browser compatibility considerations:
Flexbox is widely supported across modern browsers, including Chrome, Firefox, Safari, and IE11. However, some older versions of Internet Explorer may require vendor prefixes.

CSS Grid Method:

Introduction to CSS Grid:
CSS Grid is another layout module that allows creation of complex grid-based layouts. It provides a more structured approach to creating both vertical and horizontal lists.

Setting up the grid container:
To use CSS Grid, you need to create a grid container by setting its display property to “grid”.

Defining grid areas and columns:
You can define the grid areas and columns using the grid-template-areas and grid-template-columns properties respectively. This allows you to create a flexible grid structure.

Placing items within the grid cells:
To place items within the grid cells, you can use the grid-area property and assign specific grid areas to each item. This will determine their position within the grid.

Adjusting spacing between items:
By defining the gap property within the grid container, you can adjust the spacing between the grid items. This helps in creating a well-organized and visually appealing horizontal list.

Creating a horizontal list using CSS Grid:
To create a horizontal list, you can set the grid-template-rows property to a fixed value and grid-auto-flow to “column”. This will ensure that the items are displayed in a horizontal direction.

Aligning items with justify-items and align-items properties:
To align the items within the grid, you can use the justify-items and align-items properties. By setting them to “center”, “start”, or “end”, you can align the items horizontally and vertically.

Browser support and fallback options:
CSS Grid is supported by modern browsers, including Chrome, Firefox, Safari, and Microsoft Edge. However, older versions of Internet Explorer do not support it fully. In such cases, you can use fallback options like Flexbox or other methods.

Inline-block Method:

Introduction to inline-block:
The inline-block method lets you display elements within a line while maintaining their block-level properties. It is commonly used for creating horizontal lists.

Displaying elements inline-block:
To make a list horizontal using inline-block, you need to set the display property of the list items to “inline-block”. This will display the items in a line while still preserving their block-level properties.

Fixing the white space issue:
When using inline-block, there is a known issue of white space between the elements causing unwanted gaps. To fix this, you can remove the white space in the HTML markup or use CSS techniques like negative margins or font-size: 0 on the parent container.

Adjusting spacing and alignment of the items:
To control the spacing and alignment of the items, you can use CSS properties like margin, padding, and text-align. By adjusting these properties, you can achieve the desired horizontal layout.

Creating a horizontal list using inline-block:
Once you have set the display property of the list items to “inline-block”, the list will automatically be displayed in a horizontal format.

Dealing with dynamic content and overflow:
In case the content within the list items exceeds the width of the container, you can handle it by using CSS properties like white-space: nowrap, overflow: hidden, or text-overflow: ellipsis. These properties ensure that the content remains within the specified width.

Centering the list items horizontally:
To center the inline-block list items horizontally within the container, you can use CSS properties like text-align: center on the parent container and display: inline-block on the list items.

Cross-browser compatibility considerations:
Inline-block is widely supported by modern browsers, including Chrome, Firefox, Safari, and IE8+. However, there may be slight rendering differences between browsers, so it’s important to test and make necessary tweaks.

Transform Property Method:

Introduction to the transform property:
The transform property is primarily used to apply transformations to elements, such as rotations, translations, and scaling. It can also be utilized to create a horizontal list.

Translating elements horizontally:
To create a horizontal list using the transform property, you can use the translateX property to translate the list items horizontally. By applying a positive pixel value, the items will be visually shifted to the right.

Rotating elements to create horizontal alignment:
Another way to create a horizontal list is by rotating the list items using the transform property. By setting the rotate property to 90 degrees, the items will be aligned horizontally.

Scaling elements to create a horizontal list:
Scaling the list items horizontally using the scaleX property of the transform property can also create a horizontal list effect. By setting the scaleX property to any value greater than 1, the items will be stretched along the horizontal axis.

Creating a horizontal list using the transform property:
To create a horizontal list, you can apply the desired transformation, such as translation, rotation, or scaling, to the list items using the transform property.

Adjusting spacing and alignment of the items:
To control the spacing and alignment of the items, you can use CSS properties like margin, padding, and text-align. By adjusting these properties, you can achieve the desired horizontal layout.

Dealing with dynamic content and overflow:
If the content within the list items exceeds the width of the container, you can handle it by applying CSS properties like overflow: hidden or text-overflow: ellipsis. These properties ensure that the content remains within the specified width.

Browser support and considerations:
The transform property is widely supported by modern browsers, including Chrome, Firefox, Safari, and IE9+. However, older versions of Internet Explorer may require vendor prefixes.

Table Display Method:

Introduction to table display:
The table display method involves using CSS properties to create a table-like structure. It can be used to create a horizontal list by utilizing the table, table-row, and table-cell properties.

Setting the display property to table:
To create a table-like structure, you need to set the display property of the parent container to “table”. This will make it behave like a table.

Creating table rows and cells:
Using CSS properties like display: table-row and display: table-cell, you can create rows and cells within the table structure. Each list item will be treated as a cell.

Adjusting cell spacing and alignment:
To control the spacing and alignment of the cells within the table, you can use CSS properties like border-spacing, padding, and vertical-align. These properties help in achieving the desired horizontal layout.

Creating a horizontal list using table display:
Once you have set up the table structure with rows and cells, the list items will automatically be displayed in a horizontal format.

Styling the table for horizontal alignment:
To style the table-like structure according to your requirements, you can apply CSS properties like borders, background color, and font styles. This allows you to customize the appearance of the horizontal list.

Dealing with dynamic content and overflow:
If the content within the list items exceeds the width of the container, you can handle it by applying CSS properties like overflow: hidden or text-overflow: ellipsis. These properties ensure that the content remains within the specified width.

Browser support and considerations:
The table display method is widely supported by modern browsers, including Chrome, Firefox, Safari, and IE8+. However, it is important to note that using table-related CSS properties for layout purposes is not recommended as it goes against the semantics of HTML.

Float Property Method:

Introduction to the float property:
The float property is commonly used for positioning elements horizontally. It can be utilized to create a horizontal list by floating the list items.

Floating list items to create horizontal alignment:
To make a list horizontal using the float property, you can set the float property of the list items to “left”. This will align the items horizontally and allow them to float next to each other.

Clearing the float and preventing wrapping:
When using the float property, it is important to clear the float to prevent unwanted wrapping or overlapping of elements. This can be achieved by using the “clearfix” technique or clearing the float property using CSS pseudo-elements like “clear: both”.

Adjusting spacing and alignment of the items:
To control the spacing and alignment of the floated items, you can use CSS properties like margin, padding, and text-align. By adjusting these properties, you can achieve the desired horizontal layout.

Creating a horizontal list using the float property:
Once you have set the float property of the list items to “left”, the list will automatically be displayed in a horizontal format.

Dealing with dynamic content and overflow:
In case the content within the list items exceeds the width of the container, you can handle it by applying CSS properties like overflow: hidden or text-overflow: ellipsis. These properties ensure that the content remains within the specified width.

Using clearfix technique to clear floats:
To clear the float and prevent wrapping or overlapping, you can use the “clearfix” technique. This involves adding an additional HTML element with the CSS class of “clearfix” and applying CSS properties like clear: both and display: table.

Browser support and considerations:
The float property is widely supported by modern browsers, including Chrome, Firefox, Safari, and IE8+. However, it is important to note that using floats for layout purposes can sometimes lead to complex and unpredictable behavior.

Inline Method:

Introduction to inline elements:
Inline elements are displayed within a line of text and do not start on a new line. They can be used to create a horizontal list by changing the display property to “inline”.

Changing display property to inline:
To make a list horizontal using inline elements, you need to change the display property of the list items to “inline”. This will cause the items to be displayed within a line.

Adjusting spacing and alignment of the items:
To control the spacing and alignment of the inline items, you can use CSS properties like margin and padding. By adjusting these properties, you can achieve the desired horizontal layout.

Creating a horizontal list using inline elements:
Once you have changed the display property of the list items to “inline”, the list will be automatically displayed in a horizontal format.

Styling the list for horizontal alignment:
To style the list and achieve the desired horizontal alignment, you can apply CSS properties like text-align and font styles. This helps in customizing the appearance of the horizontal list.

Dealing with dynamic content and overflow:
If the content within the list items exceeds the width of the container, you can handle it by applying CSS properties like overflow: hidden or text-overflow: ellipsis. These properties ensure that the content remains within the specified width.

Cross-browser compatibility considerations:
Inline elements are widely supported by modern browsers, including Chrome, Firefox, Safari, and IE8+. However, it is important to note that line breaks or white space in the HTML markup can affect the appearance of inline elements.

List-style-type Property Method:

Introduction to list-style-type property:
The list-style-type property is used to customize the appearance of list items, including their numbering or bullet points. It can be utilized to create a horizontal list by changing the display property to “inline” and modifying the list-style-type property.

Customizing the appearance of list items:
To customize the appearance of list items, you can use the list-style-type property and assign it values like “none”, “decimal”, “circle”, or “square”. These values change the numbering or bullet points associated with list items.

Using CSS counters for custom numbering:
To create custom numbering for list items, you can use CSS counters. By combining the list-style-type property with CSS counters, you can achieve unique numbering styles for each item.

Styling list items for horizontal alignment:
To style the list items and achieve horizontal alignment, you can change the display property of the list items to “inline” and apply CSS properties like margin and padding.

Creating a horizontal list using list-style-type property:
Once you have changed the display property of the list items to “inline” and customized the list-style-type property, the list will be automatically displayed in a horizontal format.

Adjusting spacing and alignment of the items:
To control the spacing and alignment of the horizontal list items, you can use CSS properties like margin and padding. By adjusting these properties, you can achieve the desired layout.

Dealing with dynamic content and overflow:
In case the content within the list items exceeds the width of the container, you can handle it by applying CSS properties like overflow: hidden or text-overflow: ellipsis. These properties ensure that the content remains within the specified width.

Browser support and considerations:
The list-style-type property is widely supported by modern browsers, including Chrome, Firefox, Safari, and IE8+. However, it is important to note that rendering of list-style-type values can vary between browsers.

Custom Layout Method:

Introduction to custom layout:
If none of the previous methods suit your requirements, you can create a custom layout for your horizontal list. This involves creating a container for the list items and positioning it horizontally.

Creating a container for the list items:
To create a custom layout, you need to create a container for the list items. This container will hold the list items and control their positioning.

Positioning the container horizontally:
To position the container horizontally, you can use CSS properties like position: absolute or position: relative, in combination with left or right values. This allows you to adjust the container’s position accordingly.

Adjusting spacing and alignment of the items:
To control the spacing and alignment of the list items within the container, you can use CSS properties like margin, padding, and text-align. By adjusting these properties, you can achieve the desired horizontal layout.

Creating a horizontal list using custom layout:
Once you have positioned the container and adjusted the spacing and alignment of the list items, the list will be displayed in a horizontal format.

Styling the list for horizontal alignment:
To style the custom layout according to your requirements, you can apply CSS properties like borders, background color, and font styles. This helps in customizing the appearance of the horizontal list.

Dealing with dynamic content and overflow:
If the content within the list items exceeds the width of the container, you can handle it by applying CSS properties like overflow: hidden or text-overflow: ell

CSS Space Between List Items Horizontally: Enhancing Layouts with Style and Precision

In the realm of web design, the devil is in the details. One significant aspect that can greatly influence the overall appearance and functionality of a webpage is the spacing between elements. When it comes to lists, arranging the items in a way that is pleasing to the eye, easy to navigate, and aesthetically appealing is crucial. This is where CSS comes into play, offering developers a plethora of options to tweak and enhance the spacing between list items horizontally.

Understanding CSS Basics: A Quick Refresher
Before delving into the specifics of space between list items, let us quickly recap the fundamentals of CSS (Cascading Style Sheets). CSS is a programming language that controls the visual presentation of a webpage. It allows developers to define the layout, colors, fonts, and other visual elements. With CSS, designers can create stunning and cohesive webpages, ensuring a seamless user experience.

CSS offers various methods to customize the horizontal spacing of list items. This ranges from altering the actual space between the items to adding decorative elements that enhance the visual appeal of the list. Below, we explore some popular techniques that can help accomplish these goals.

1. Margins and Padding:
Margins and padding are two fundamental CSS properties used for creating space around elements. The margin property defines the space outside an element, while padding specifies the space within an element. By adjusting the margin or padding of list items, you can control the horizontal spacing between them. For example, using margin-right or margin-left can create consistent gaps between items.

2. Display: Inline, Inline-Block, and Flexbox:
Display properties are essential for controlling the layout of elements on a webpage. The display property determines if an element behaves as an inline, inline-block, or block level element. Inline elements, by default, do not respect width and height properties. However, inline-block elements can be manipulated to set specific widths and heights while still maintaining their inline-like behavior. This property is useful when dealing with lists, as it allows for precise control over the spacing between items.

Alternatively, using flexbox can greatly simplify the task of spacing list items. Flexbox is a powerful layout system that enables developers to create flexible and responsive designs. By applying the display: flex property to a parent container, and aligning the items within it using different justify-content values, horizontal spacing is easily achieved.

3. The ::before Pseudo-Element:
The ::before pseudo-element is a useful tool for adding decorative elements to list items or any other HTML element. By inserting custom content before each item, designers can introduce additional spacing or decorative elements. By manipulating the width and height properties of the ::before pseudo-element, creative possibilities are endless.

4. Grid Layouts:
CSS Grid is another advanced layout system that allows for precise alignment and positioning of elements. With CSS Grid, developers can create complex two-dimensional layouts, including horizontal spacing between list items. By applying grid properties to the parent container and defining the desired number of columns and gaps, items can be effortlessly arranged.

Frequently Asked Questions (FAQs):

Q1. Can I add different spacing between each list item?
Yes, it is possible to add different spacing between each list item. By assigning unique margin or padding values to each list item, you can achieve custom spacing.

Q2. How can I ensure consistent spacing across different screen sizes?
To ensure consistent spacing across different screen sizes, it is recommended to use relative units such as percentages or ems. This ensures that the spacing adapts to the available screen space, providing a consistent user experience.

Q3. Is it necessary to use complex CSS properties like Flexbox or Grid Layouts to space list items?
No, it is not necessary to use complex CSS properties like Flexbox or Grid Layouts. Margins and padding alone can be used to achieve the desired spacing. However, the aforementioned advanced techniques provide greater control and flexibility over the layout.

Q4. How can I create a grid-like spacing between list items?
To create a grid-like spacing between list items, you can utilize CSS Grid. By defining the desired number of columns and gaps, you can create a perfectly aligned grid layout.

Q5. Are there any browser compatibility issues with these CSS techniques?
Most modern web browsers fully support these CSS techniques. However, it is essential to test the layout across different browsers and versions to ensure consistent results. There are also polyfills and fallbacks available for older browsers that may not support certain CSS properties.

In conclusion, spacing between list items horizontally plays a vital role in enhancing the aesthetics and functionality of webpages. With CSS’s vast array of tools and techniques, developers have the power to create visually appealing and well-organized lists. By leveraging properties such as margins, padding, inline-block, flexbox, pseudo-elements, and grid layouts, designers can achieve exquisite spacing, ensuring a seamless user experience on any device. So, whether you’re a novice or seasoned developer, mastering these CSS techniques will undoubtedly elevate your web design skills.

Ul li horizontal is a popular web design technique used to create horizontal menus and lists. It allows for a clean and organized layout that is visually appealing and easy to navigate. In this article, we will explore the benefits, implementation, and best practices of ul li horizontal. We will also address some frequently asked questions to provide a comprehensive understanding of this technique.

What is ul li horizontal?

Ul li horizontal refers to using the ul (unordered list) and li (list item) HTML tags to create a horizontal menu or list. By default, ul li elements are rendered vertically, but with some CSS styling, they can be displayed horizontally. This technique is widely used in web design for creating navigation menus, header elements, or even content sections.

Benefits of ul li horizontal

Ul li horizontal offers several benefits that make it a popular choice among web designers:

1. Aesthetic appeal: Horizontal menus provide a clean and sleek visual appearance, which is highly desirable in modern web design. It allows for a more organized layout and a better user experience.

2. Space optimization: Horizontal menus consume less vertical space compared to their vertical counterparts. This is particularly important for websites with limited screen space, such as mobile or responsive designs.

3. Improved usability: Horizontal menus are easy to scan and navigate, as they are in line with the natural eye movement from left to right. Users can quickly locate and select the desired item without much effort.

4. Versatility: Ul li horizontal can be used for various purposes, including navigation menus, feature lists, product showcases, and more. This versatility allows designers to adapt the technique to different design requirements.

Implementing ul li horizontal

To implement ul li horizontal, you need a basic understanding of HTML and CSS. Here’s a step-by-step guide on how to achieve this effect:

1. HTML structure: Start by creating an unordered list using the ul tag. Within the ul tag, create list items using the li tag. Each list item represents an element in your horizontal menu or list.

“`html

• Item 1
• Item 2
• Item 3

…

“`

2. CSS styling: Apply CSS styles to convert the vertical ul li into a horizontal layout. Use the display property with the value of “inline” or “inline-block” to achieve the horizontal alignment.

“`css
ul {
list-style-type: none;
padding: 0;
}

li {
display: inline-block;
margin-right: 10px; /* add spacing between items */
}
“`

3. Customize styling: Use CSS to further style the ul li to match your design requirements. You can change font styles, add hover effects, adjust margins, and more.

Best practices for ul li horizontal

To make the most out of ul li horizontal, it’s important to follow some best practices:

1. Responsive design: Make sure the horizontal layout works well on different screen sizes and is mobile-friendly. Consider using media queries and CSS frameworks like Bootstrap to ensure a consistent experience across devices.

2. Limited number of items: Avoid overcrowding the menu with too many items, as it may result in readability and usability issues. Stick to a concise set of options that are essential for users.

3. Clear differentiation: Clearly distinguish the active menu item, hover effects, or any other visual cues to indicate the current selection. This helps users understand their current navigation status within the menu.

4. Consistent spacing: Maintain consistent spacing between menu items to ensure a visually balanced design. Unequal spacing can disrupt the flow and appearance of the menu.

FAQs about ul li horizontal

1. Can I have nested ul li horizontal menus?
Yes, you can create nested ul li horizontal menus by applying the same CSS styling to nested ul and li elements. This allows for multi-level navigation or drop-down menus.

2. Can I use images in ul li horizontal menus?
Absolutely! You can add images to ul li horizontal menus by defining the appropriate HTML structure and applying CSS.

3. Is ul li horizontal SEO-friendly?
Yes, ul li horizontal menus are SEO-friendly as search engines can easily crawl and index the content. However, it’s important to ensure that the menu items have appropriate anchor text and meaningful titles for optimal SEO benefits.

4. Are there any performance considerations for ul li horizontal menus?
Ul li horizontal menus do not have a major impact on performance. However, excessive use of animations or complex CSS effects can increase page load times. Optimize your CSS and JavaScript to maintain a good balance between aesthetics and performance.

In conclusion, ul li horizontal is a valuable web design technique that enhances the aesthetics, usability, and organization of menus and lists. By following the implementation steps and best practices outlined in this article, you can create visually appealing and user-friendly horizontal menus. Embrace the versatility of ul li horizontal in your designs to improve the overall user experience on your website.

How to Make Li Horizontal: A Step-by-Step Guide

The use of lists in web design is a common practice to organize and present information in a structured manner. By default, the

(list item) elements in HTML create vertical lists, where each item appears below the previous one. However, in certain situations, it may be more visually appealing or necessary to display the list items horizontally. Thankfully, with a few simple steps, you can make

horizontal and achieve a more aesthetically pleasing layout. In this article, we will guide you through the process, covering everything you need to know to create horizontal lists using CSS.

Step 1: Structuring the HTML

To begin, let’s consider a basic example list structure in HTML. Assume we have an unordered list (

) containing several list items (
• ). Here’s the initial HTML structure:

  “`

  • Item 1
  • Item 2
  • Item 3
  • Item 4

  “`

  In this case, the list items will be displayed vertically, each on a new line. To make them horizontal, we’ll need to apply CSS styles.

  Step 2: Applying CSS

  To achieve a horizontal layout, we’ll utilize CSS properties and selectors to modify the default behavior of the

• elements. Let’s take a look at two popular approaches:

  Approach 1: Display Property

  In this approach, we’ll change the display property of the

• elements to “inline” or “inline-block”. This will allow them to be positioned next to each other horizontally.

  Here’s an example of the CSS code:

  “`css
  ul li {
  display: inline; /* or display: inline-block; */
  }
  “`

  By applying this style, the list items will line up horizontally, but might not wrap to a new line if they exceed the available space. If you want the list items to wrap, use “inline-block” instead of “inline”. This will ensure they wrap to a new line when necessary.

  Approach 2: Flexbox

  Flexbox is a powerful CSS layout model that offers more control over the position and alignment of elements. To use flexbox, you need to apply the “display: flex;” property to the parent

  element and “display: inline” to each
  • element.

    “`css
    ul {
    display: flex;
    }

    ul li {
    display: inline;
    }
    “`

    Using flexbox, you gain additional flexibility to control the alignment, spacing, and ordering of the list items. You can leverage other flexbox properties, such as “justify-content” and “align-items”, to fine-tune the appearance of your horizontal list.

    Step 3: Enhancing Styling

    To further enhance the visual appeal of the horizontal list, you can modify the styling of the

  • elements by editing their CSS properties. Here are some common techniques to consider:

    1. Add spacing between list items:
    “`css
    ul li {
    margin-right: 10px; /* adjust spacing as desired */
    }
    “`

    2. Change the background color or apply borders:
    “`css
    ul li {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    }
    “`

    3. Modify text alignment or font properties:
    “`css
    ul li {
    text-align: center;
    font-weight: bold;
    }
    “`

    Feel free to experiment with various CSS properties to achieve your desired look and feel.

    FAQs

    Q1: Can I have both horizontal and vertical lists on the same webpage?
    A1: Yes, you can include both horizontal and vertical lists on the same webpage. Simply separate them into different

    elements and apply the appropriate CSS styles to each.

    Q2: How can I align the horizontal list to the center of the page?
    A2: To center the horizontal list, you can use the “margin: 0 auto;” property in the CSS of the parent

    element. This centers the list within its container.

    Q3: Can I make a horizontal menu using list items?
    A3: Absolutely! By styling the

    as a navigation bar and adding some CSS, you can create a horizontal menu using
    • elements.

      Q4: How can I make the horizontal list responsive?
      A4: With the flexbox approach, you can make the horizontal list responsive by adding media queries and adjusting the flexbox properties (e.g., flex-wrap) for different screen sizes.

      Q5: Is it possible to add icons or images alongside the text in each list item?
      A5: Yes, you can easily include icons or images alongside the text in each list item by utilizing HTML and CSS techniques. For example, you could use the “background-image” property to add icons or use the tag for images.

      In conclusion, making a

    • horizontal can greatly enhance the visual presentation of your web content. By applying the appropriate CSS styles and considering additional enhancements, such as spacing, background colors, and text alignment, you can create stunning and intuitive lists. Whether you prefer the display property approach or the more flexible flexbox model, you now have the tools to create horizontal lists and improve the overall user experience of your website.

Found 17 images related to how to make list horizontal in css theme