Is it possible to maintain child divs in a single line?

Question

Is it possible to maintain child divs in a single line?

Despite trying numerous recommendations (many involving white-space:nowrap and display:inline-block), I have been unsuccessful in keeping these child divs on a single line with horizontal scrolling.

This is my code:

<div id="list">
    <a href="javascript:show('shown','id1','a1');"><div id="a1" class="inactive">link1</div></a>
    <div id="spacer"></div>
    <a href="javascript:show('shown','id2','a2');"><div id="a2" class="inactive">link2</div></a>
    <div id="spacer"></div>
    <a href="javascript:show('shown','id3','a3');"><div id="a3" class="inactive">link3</div></a>
    <div id="spacer"></div>
    <a href="javascript:show('shown','id4','a4');"><div id="a4" class="inactive">link4</div></a>
    <div id="spacer"></div>
    <a href="javascript:show('shown','id5','a5');"><div id="a5" class="inactive">link5</div></a>
    <div id="spacer"></div>
    <a href="javascript:show('shown','id6','a6');"><div id="a6" class="inactive">link6</div></a>
</div>

In essence, this serves as a mobile navigation bar that scrolls horizontally.

The regular version of the bar is vertical (working correctly) and the "spacer" div acts as a separator, transitioning from a horizontal rule to a vertical rule.

css html parent-child

Answer 1

Answer №1

If you want to prevent line breaks in your text, use the CSS property white-space: nowrap;

Check out this demo for reference

#list {
    white-space: nowrap;
}
#list a, #list a div, #list .spacer {
    display: inline-block;
}
#list a {
    /* Additional styling for demonstration purposes */
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 50px;
}

IMPORTANT NOTE: IDs should be unique on a page. Avoid using multiple elements with the same ID like #spacer. Instead, consider using classes for repeated elements.

Answer 2

If you want to prevent line breaks in your text, use the CSS property white-space: nowrap;

Check out this demo for reference

#list {
    white-space: nowrap;
}
#list a, #list a div, #list .spacer {
    display: inline-block;
}
#list a {
    /* Additional styling for demonstration purposes */
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 50px;
}

IMPORTANT NOTE: IDs should be unique on a page. Avoid using multiple elements with the same ID like #spacer. Instead, consider using classes for repeated elements.

Answer 3

Answer №2

You've got a mix of inline and block elements.

To optimize, set them all to display:inline-block; and make use of the white-space property.

#list {
  white-space:nowrap;
}
#list div ,
#list a {
  display:inline-block;
  white-space:normal;
  vertical-align:middle/* or specify another value*/
}

Answer 4

You've got a mix of inline and block elements.

To optimize, set them all to display:inline-block; and make use of the white-space property.

#list {
  white-space:nowrap;
}
#list div ,
#list a {
  display:inline-block;
  white-space:normal;
  vertical-align:middle/* or specify another value*/
}

Answer 5

Answer №3

Instead of altering the children's CSS like some other solutions suggest, I recommend simply converting the list to a flex layout:

All that is needed is to switch the list to be inline-flex, as shown here:

#list {
  display: inline-flex;  
}

/* emulating the spacer you mentioned */
#spacer { width: 10px; height:10px; }

<div id="list">
    <a><div>link1</div></a>
    <div id="spacer"></div>
    <a><div>link2</div></a>
    <div id="spacer"></div>
    <a><div>link3</div></a>
    <div id="spacer"></div>
    <a><div>link4</div></a>
    <div id="spacer"></div>
   <a><div>link5</div></a>
    <div id="spacer"></div>
    <a><div>link6</div></a>
</div>

Answer 6

Instead of altering the children's CSS like some other solutions suggest, I recommend simply converting the list to a flex layout:

All that is needed is to switch the list to be inline-flex, as shown here:

#list {
  display: inline-flex;  
}

/* emulating the spacer you mentioned */
#spacer { width: 10px; height:10px; }

<div id="list">
    <a><div>link1</div></a>
    <div id="spacer"></div>
    <a><div>link2</div></a>
    <div id="spacer"></div>
    <a><div>link3</div></a>
    <div id="spacer"></div>
    <a><div>link4</div></a>
    <div id="spacer"></div>
   <a><div>link5</div></a>
    <div id="spacer"></div>
    <a><div>link6</div></a>
</div>

Is it possible to maintain child divs in a single line?

This is my code:

Answer №1

Answer №2

Answer №3

Similar questions

json success function not being triggered

Having trouble getting the HTML input textbox onChange event to fire properly?

What is the process for dynamically looping through a table and adding form data to the table?

Automatically adjust text size within div based on width dimensions

How about, "Enhance your website navigation with a sleek anchor

Switch out a visual element for Dropzone.js

Output text in Javascript (not to the console)

Obtaining the element ID with Selenium WebDriver in cases of dynamic IDs

What's preventing me from aligning this div in the center?

leveraging the unique MySQL id displayed within the onclick/checkbox identifier

Styling your Vuetify V-data-table with CSS

Displaying a hand cursor on a bar chart when hovered over in c3.js

How to Perfectly Center a Div using CSS in Next.js (slightly off-center)

Comparison of the "Proposed Recommendation" versus the "Candidate Recommendation"

Can one retrieve the CSS/XPath from a Capybara Element?

Designing GWT FlexTable using pure CSS styling

Resolving a CSS Layout Dilemma: How to Overlay Sidebar on Wrappers

The closing brackets in PHP substr() function are causing style issues

Issues with the Content Editable Functionality

Using jQuery to refresh a div element