How can you horizontally align a collection of elements using CSS?

I'm struggling to align a paragraph element with a group of button elements using jQuery and CSS.

This is my issue:

My goal is to have all these elements on the same horizontal line at the top of the screen to make the most of the pixel real-estate. I want the "DesignName" text followed immediately by the buttons in a line.

This is how the elements are being added in the code: 

var theDiv = $("#theDiv");

theDiv.append('<div id="buttonMenuDiv"></div>');

var buttonDiv = $("#buttonMenuDiv");
buttonDiv.append('<p id="DesignName" class="DesignName">DesignName</p>');
buttonDiv.append('<input type="button" id="MainMenu" value="Main Menu" >');
buttonDiv.append('<input type="button" id="NewModule" value="New Module" >');
buttonDiv.append('<input type="button" id="SearchDesigns" value="Search Designs" >');
buttonDiv.append('<input type="button" id="DesignDescription" value="Design Description" >');
buttonDiv.append('<input type="button" id="SaveWork" value="Save Work" >');
buttonDiv.append('<input type="button" id="PackageDesign" value="Package Design" >');
buttonDiv.append('<input type="button" id="Tutorial" value="Tutorial" >');

The "DesignName" class only defines font attributes (size, color) so I didn't include it. Appreciate any help.

(Struggling with using single quotes in the append() calls for editing)

javascriptjqueryhtmlcss

Answer №1

#theDiv * {
display:inline;
}

Simply change the display property to inline for all elements instead of block.

http://jsfiddle.net/u9bKm/5/

Answer №2

Blocks like paragraphs and divs automatically create line breaks, while inlines like inputs do not. If you don't want "Design Name" to have a line break after it, consider putting it in a span, which flows with the text. Another option is to use floating or setting "display: inline" in the CSS for simple items to keep them on the same line.

Answer №3

One way to style those buttons is by using a CSS rule like the following:

/* CSS rule */

#buttonMenuDiv > button {
   display: inline-block;
}

If you prefer, you can set the display property to inline or inline-block. Keep in mind that setting them to inline will override the 'width' and 'height' attributes.

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

In order to ensure a valid JSON for parsing in JavaScript, one must reverse the usage of single quotes and double quotes. This adjustment

Received an API response structured like this: [{'name': 'men', 'slug': 'men'}, {'name': 'women', 'slug': 'women'}] After stringifying: const data = JSON.stringify(resp) " ...

javascriptjsonreactjsjavascript-objects

Utilizing Vue to send information to the POST function

I am encountering an issue with passing data to the Vue.js post method. I am using vue-resource and according to the documentation, it should be structured like this: this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCall ...

javascriptvue.js

JavaScript framework that is easily customizable to include support for XmlHttpRequest.onprogress, even if it needs to be emulated

Which JavaScript library or framework offers support for the "onprogress" event for XmlHttpRequest, even if it needs to be emulated using a plugin or extension? Alternatively, which JavaScript framework is the most straightforward to extend in order to add ...

ajaxxmlhttprequestjavascript

The event handler is not defined and is failing to recognize in the React context

Currently, as I delve into the realm of learning React, I find myself facing a perplexing issue regarding the mysterious undefined state of this event handler. Why is it behaving in such an enigmatic manner? const Login = () => { handleSubmit = (e) ...

javascriptreactjs

Using Backbone to Retrieve a JSON File from a Server: Deciding Whether to Include the File Extension ".json" in the URL or URLRoot

Exploring Backbone with exercise by trying to obtain a JSON file from the server using the urlRoot property of the Model. Encountered an error (404) when setting urlRoot: "./js/json/todo", paths with ".json" work but console.log(todoItem.get('descrip ...

javascriptjsonbackbone.js

Express in NodeJS: My app contains two app.get requests that seamlessly merge

Need help with distinguishing between two requests in my code: app.get('/assignment/loans', (req, res) => { const idOne = req.query.bookID; } and the other request: app.get('/assignment/loans', (req, res) => { const idTw ...

javascriptnode.jssqliteexpress

Having difficulty with closing a modal using v-model in VueJS

Upon pressing the button labeled Close, an error message appeared in the console as shown below: "Error: Cannot find module './undefined'" found in ---> <WhatsNew> at src/components/WhatsNew.vue Displayed below is the conten ...

javascriptvue.js

Even when there is a change in value within the beforeEach hook, the original value remains unchanged and is used for dynamic tests

My current project setup: I am currently conducting dynamic tests on cypress where I receive a list of names from environment variables. The number of tests I run depends on the number of names in this list. What I aim to achieve: My main goal is to manip ...

javascripttypescriptcypress

Counting numbers and displaying results using JavaScript with a JSON string

Looking at this JSON string { "ResultSet": { "version": "1.0", "Error": 0, "ErrorMessage": "No error", "Locale": "us_US", "Quality": 40, "Found": 2, "Results": [{ "quality": 72, ...

javascriptjsonstringcounting

Finding a particular movie in React

import { useState,useEffect } from 'react' import React from 'react' import MoviesItem from './MoviesItem' const Movies = ({search}) => { const [movie, setMovie] = useState([]) const fetchData = async() => ...

javascriptreactjsomdbapi

Learn the steps to merging all yarn files using gulp

After successfully setting up yarn and getting the hang of how it functions, I've also started to grasp the basics of gulp. I was relieved to find out how to install version 4 and avoid those deprecated errors that came with the default version. As o ...

javascriptyarnpkg

The fetch request in a React application is not returning a response body, whereas the same request functions properly when made using Postman

My React app is successfully running locally with backend REST APIs also running locally. However, when I attempt to make a POST call to the REST API, the call goes through but the body appears to be empty. Below is a snippet of the sample code: const bod ...

javascriptreactjsfetch-api

What is the essential Angular 2 script that must be included for a simple Angular 2 application to function properly?

I'm currently working through the latest Tuts+ tutorial on Angular 2 In the tutorial, the author references adding this script: <script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script> However, in the most recent beta re ...

javascriptangularnpm

Display Google spreadsheet column values on an HTML page

Looking to create a notification page on my Google Sites using data from spreadsheet cells. Here's a sample of HTML code from W3 CSS Tabs: W3 CSS Tabs Can someone assist me in inserting cell values into the <P> tags? https://i.sstatic.net/jk1u ...

htmlgoogle-apps-scriptspreadsheet

Error message: "No elements were found in Ember.js jQuery cycle slideshow"

As I transition a traditional HTML site to an Ember.js application, I encountered a problem with the jQuery Cycle slideshow plugin. With approximately 10 slideshows on the site, I aimed to create a reusable partial to pass data to. Although the data passi ...

javascriptjqueryember.jshandlebars.jsjquery-cycle

"Customize your Vuetify v-card with uniquely styled rounded corners on only

I am seeking to create a unique v-card design where only two corners are rounded. Despite my attempts, the card ended up rotated by 90° and didn't achieve the desired outcome. DESIGN ATTEMPT: <div class="text-center rotate-ninety ml-n6" ...

cssvue.jsvuetify.js

Creating input fields in Vue 3: Best practices

I am looking to create an input field that automatically removes entered characters if they do not match a specific pattern. Here is the template: <input type="text" :value="val" @input="input" /> And here is the ...

javascriptvue.jsvuejs3

An easy guide to using Vue-Router to manipulate URL query parameters in Vue

I'm currently working on updating query parameters using Vue-router as I change input fields. My goal is to adjust the URL query parameters without navigating to a different page, but only modifying them on the current page. This is how I am approachi ...

javascriptvue-routervue.js

Alter the shape of the semi-circle to be more elongated and ellipt

Check out my jsfiddle: http://jsfiddle.net/c4upM/103/ I have managed to create a gray arc and a blue/green arc. My goal is to make these arcs more Elliptic, like this: However, my attempts have not been successful so far. I came across this example: h ...

javascriptjquerycanvas

ReactJS Enhancements: Additional Selection Feature

Is there a way to access both {board.id} and {board.name} properties in my select value? I tried using example={board.name} but it didn't work. handleChange(event){ this.setState({value: event.target.value}); this.setState({examp ...

javascriptreactjs