There are two lists appearing on a single webpage, one displayed inline and the other presented initially

I'm attempting to arrange two unordered lists in columns next to each other.

My goal is to have the list on the left display as initial;, while the list on the right displays as inline;.

You can check out my example on this fiddle.

ul > li {
        display: initial;
    }

ul > li .hashtag {
        display: inline-block;
        margin: 5px 5px;      
}

I've experimented with adding the styles in the stylesheet, head section, and directly in the HTML. But I'm still unable to achieve the desired result.

htmlcsshtml-listsdisplay

Answer №1

.hashtag is a ul class, attempting to apply CSS on the li child of it, which will not take effect. To achieve the desired result, modify your selector as follows:

ul.keyword  {
  display: initial;
}

ul.hashtag > li {
  display: inline-block;
  margin: 5px 5px;      
}
<div class="container">
<div class="row">
      <div class="col-lg-6">
        <h3>Below is a list of the most common keywords.</h3>
        <div class="col-lg-4">
          <ul class="keyword">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
          </ul>
        </div>
        <div class="col-lg-4">
          <ul class="keyword">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
          </ul>
        </div>
        <div class="col-lg-4"></div>
      </div>
      <div class="col-lg-6">
        <h3>Below is a list of the most common hashtags used. <small>Click to copy</small></h3>
        <ul class="hashtag">
          <li><button class="btn btn-sm btn-primary">#Button 1</button></li>
          <li><button class="btn btn-sm btn-primary">#Button 2</button></li>
          <li><button class="btn btn-sm btn-primary">#Button 3</button></li>
          <li><button class="btn btn-sm btn-primary">#Button 4</button></li>
          <li><button class="btn btn-sm btn-primary">#Button 5</button></li>
          <li><button class="btn btn-sm btn-primary">#Button 6</button></li>
          <li><button class="btn btn-sm btn-primary">#Button 7</button></li>
          <li><button class="btn btn-sm btn-primary">#Button 8</button></li>
          <li><button class="btn btn-sm btn-primary">#Button 9</button></li>
        </ul>
      </div>
    </div>
</div>

Answer №2

Check out this working fiddle Make the updates to the HTML below

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h3>Here is a list of common keywords.</h3>
            <div class="col-sm-4 col-xs-4">
                <ul class="keyword">
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                    <li>Item 5</li>
                    <li>Item 6</li>
                    <li>Item 7</li>
                    <li>Item 8</li>
                </ul>
            </div>
            <div class="col-sm-4 col-xs-4">
                <ul class="keyword">
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                    <li>Item 5</li>
                    <li>Item 6</li>
                    <li>Item 7</li>
                    <li>Item 8</li>
                </ul>
            </div>
            <div class="col-xs-4"></div>
        </div>
        <div class="clearfix"></div>
        <div class="col-lg-12">
            <h3>Check out these popular hashtags. <small>Click to copy</small></h3>
            <ul class="hashtag">
                <li><button class="btn btn-sm btn-primary">#Button 1</button></li>
                <li><button class="btn btn-sm btn-primary">#Button 2</button></li>
                <li><button class="btn btn-sm btn-primary">#Button 3</button></li>
                <li><button class="btn btn-sm btn-primary">#Button 4</button></li>
                <li><button class="btn btn-sm btn-primary">#Button 5</button></li>
                <li><button class="btn btn-sm btn-primary">#Button 6</button></li>
                <li><button class="btn btn-sm btn-primary">#Button 7</button></li>
                <li><button class="btn btn-sm btn-primary">#Button 8</button></li>
                <li><button class="btn btn-sm btn-primary">#Button 9</button></li>
            </ul>
        </div>
    </div>
</div>

Check out the fiddle here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Avoid having the content below become pushed down by a collapsed navbar

I am utilizing Bootstrap 4.1 My current structure is as follows: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhkt ...

htmlcsstwitter-bootstrapbootstrap-4

The CSS list formatting does not seem to be compatible with Bootstrap 4

For my website, I am working on creating a table using the list method along with CSS. However, I encountered a problem where the table is not displaying correctly when Bootstrap CDN is applied. Removing Bootstrap CDN resolves the issue, but I need to keep ...

htmlcssbootstrap-4

Is there a way to incorporate the ::after or ::before pseudo-elements into an image tag?

While working on my project, I attempted to incorporate the ::after tag (I had used ::before as well) for an image within an img tag. However, I am facing difficulties as it doesn't seem to be working. Any advice or guidance would be greatly appreciat ...

javascripthtmlcssimageselector

Struggling with a filtering and sorting problem in my code, looking for some assistance

I'm encountering an issue with an isotope filter menu. The goal is for it to load data based on a timestamp and allow filtering. However, there seems to be a conflict between my sortBy script and the filter script. Below is the code in question: Sor ...

jqueryhtmlcssjquery-isotope

Getting the list items separated from the unordered list in Selenium

My current task involves navigating a list and selecting the correct text entry. The list contains only 2 items: <ul> <li><span>first</span></li> <li><span>second</span></li> </ul> However, ...

javahtmllistseleniumhtml-lists

HTML Buttons Remain Selected After Being Clicked

Currently working on a calculator app for a class project but I've hit a roadblock while setting up keyboard listeners. The keyboard functionality is fine, however, when it comes to clicking on buttons, specifically the non-keyboard functions, they re ...

javascripthtmlcsstwitter-bootstrap-3

Using jQuery and JSON: selecting classes based on associated JSON strings

If you want to see the complete codepen, I will share it here: http://codepen.io/JTBennett/pen/NdLWJy Let me try to simplify the problem. I have a click event that selects from a JSON object based on one of its string values. Text from various strings is ...

javascriptjquerycssjson

Having some trouble finding the input box element with Python/Selenium

I'm struggling to automate a task using Python. For some reason, I can't find the email input element with driver.find_element_by_. No matter what I try, I just can't seem to locate it. All I want is for Python to log in using Chromedriver. ...

pythonhtmlselenium

Arrange multiple lines in a straight line

I am currently utilizing bootstrap 5 for my project. <div class="col-lg-3 col-md-6"> <h5 class="text-light mb-4">Stay in contact</h5> <p><i class="fa fa-map-marker-alt me-3"></i>619 ...

cssbootstrap-5

The project is experiencing difficulties in loading the Module CSS

Currently, I am working on a React module and have set up a React project to demonstrate the functionality of this module. Initially, everything was working smoothly until I encountered an issue with the webpack configuration related to the CSS loader. { ...

cssreactjsnpm

Strategies for transferring form data to hidden fields within a Bootstrap modal form

For my form button click event, I am trying to pass form values to hidden fields in a Bootstrap model form. The button itself holds the value of pos_id from the database, and there is also a hidden text field that stores pro_id from the database. When the ...

phphtmljquery

showcase fresh material using the jquery fancybox

I have a fancybox popup using jQuery that is functioning as intended. Inside the popup, there is a link <a href="http://example.com/foo/bar.html">show another content of this fancybox</a> However, when you click on the link, the fancybox disap ...

javascriptjqueryhtmlpopupfancybox

Are there any "Undefined" tabs hiding in your RMarkdown tabsets?

After knitting my RMarkdown document to an HTML file, I noticed that the tabs appeared as shown below: https://i.sstatic.net/x1p70.png However, when I save and share the document with my audience, I encounter an issue where these tabs are labeled as "und ...

htmlrr-markdown

What is the best way to ensure the inner scrollable container maintains the same height as the outer container?

When testing the simplified version in the Browser at https://codesandbox.io/s/competent-bassi-yjtoj, everything worked as expected. However, in my project where I'm utilizing Electron, React, MUI, and plain CSS, I encountered an issue that I'm ...

cssreactjsflexboxelectronmaterial-ui

Encountered issue while submitting HTML form using POST method and jQuery

Here is the code for my form: <form id="ereserva" action="index.php" method="post"> <fieldset> <label for="id">ID</label> <input type="id" name="ei" id="eid" readonly class="id text ui-widget-content ui-corner ...

phpjqueryhtmlajax

What is the reason behind the issue where max-height disrupts border-radius?

My inline svg is styled with the following CSS: .img { border-radius: 15px; overflow: hidden; max-width: 70vw; margin-top: 6vh; max-height: 50vh; z-index: -1; text-align: center; } Everything seems to work as expected, except f ...

htmlcss

The element's width set to 100% is not functioning properly when used within a container

Struggling to create a full-width image header but the image always ends up being the width of the container, not 100%. Tried various solutions without success, and the suggested answer here did not solve the issue. Modifying the .container width in custom ...

csshtmltwitter-bootstraptwitter-bootstrap-3

I'm having trouble applying CSS stylings to my components in my React project. What could be the issue causing this?

As a React beginner, I am facing issues with getting my CSS to work properly in my project. I know that CSS is not used directly in React, but rather interpreted as JavaScript using webpack and babel. What have I tried? I attempted to make changes to my w ...

javascriptcssreactjswebpackcss-modules

Tips to prevent caching in the web console while reviewing the code document

Currently troubleshooting a PHP file with a syntax error using Firefox web console. I ensured the Disable Cache option is set and observed that changes to the file take effect immediately. However, despite displaying the syntax error in the console, clicki ...

phphtmlweb-console

Utilizing Selenium automation to navigate a website that features a custom jQuery plugin-checkbox functionality

Utilizing Selenium WebDriver along with JavaScript to automate the testing of a website that features a custom jquery plugin named "jcf" (JavaScript Custom Forms) for aesthetically pleasing forms. You can find more information about this plugin here. I am ...

javascriptjqueryhtmlseleniumcheckbox