Placing buttons next to each other, horizontally

I've implemented a Tampermonkey script on Chrome that adds buttons to web pages. Upon clicking, the script analyzes the page and displays an alert. Below is the code snippet for showing the button:

 function Main(){
     GM_addStyle('.myButtonDiv {color: black; background-color: black}');
     var div = document.createElement('div');
     div.setAttribute('class', 'myButtonDiv');
     div.innerHTML = '<input type="button" value="clickMe">';
     document.body.insertBefore(div, document.body.firstChild);
     div.firstChild.addEventListener('click', runMyScript, true);
}

I have multiple scripts like this running on the same page, but currently, the buttons are stacked vertically, occupying too much screen space.

Is there a way to align them side by side in a single row?

Appreciate any advice, Nir

javascriptcssgreasemonkeytampermonkey

Answer №1

Try including display: inline-block in your CSS code.

GM_addStyle('.myButtonDiv {color: black; background-color: black; display: inline-block}');

Answer №2

One way to achieve this is by utilizing inline elements:

 GM_addStyle('.myButtonSpan {color: black; background-color: black}');
 var buttonSpan = document.createElement('span');
 buttonSpan.setAttribute('class', 'myButtonSpan');
 buttonSpan.innerHTML = '<input type="button" value="Click Me">';
 document.body.insertBefore(buttonSpan, document.body.firstChild);
 buttonSpan.firstChild.addEventListener('click', executeMyFunction, true);

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

How can I use jQuery to set a background image and position on a website?

I am trying to incorporate a background image fade effect along with the color fade in and out when hovering over a link using my current code. However, I am unsure of how to set the background image and position within the code. $(document).ready(funct ...

jqueryhtmlcss

Utilizing Node Js and Socket.Io to develop a cutting-edge bot

Is it possible to run JavaScript with Node.js without launching Google Chrome from various proxies? Can someone provide a sample code for this task? For example, you can find a similar project here: https://github.com/huytd/agar.io-clone Another project c ...

javascriptnode.jssocket.io

Is it possible to dynamically adjust the Semantic UI Progress bar according to the data stored in mongoDB?

I am facing an issue with displaying the progress of a job on the UI in real-time. Every 5 seconds, I retrieve the job progress and store it in mongoDB. I tried using Semantic UI progress bar in my meteor project, but the progress is not incrementing as ex ...

javascriptjquerymongodbmeteorsemantic-ui

Is there a way to append a URL parameter after a link is clicked using Vue.js?

I am currently working on integrating heading links on my website's sidebar that are linked to the main content using scrollspy. This allows users to easily navigate to different sections of the main content by clicking on the corresponding headings i ...

javascriptvue.jsurlvuejs2

Tips on returning the array

I've been struggling to figure out how to extract the 'sheetsArray' from the code snippet below so that I can use it for various tasks. Despite my efforts and hours of searching online, I haven't been able to find a solution. It seems l ...

javascriptnode.jsgoogle-sheets-api

USB Hub with Web Audio API

I have been experimenting with the Web Audio API to generate sounds and play them through various output devices. In this code snippet, you can connect to two different output devices and play a unique tone on each one. Everything functions properly when ...

javascriptgoogle-chromeaudioweb-audio-api

Unable to perform multi-delete action upon clicking the checkbox button as intended

Within my GridView, I have implemented a Multi-delete feature. Below is the code snippet for your reference:- <script type="text/javascript> function ValidateAll() { var chkselectcount = 0; var gridview = document.getElementById( ...

javascriptjqueryasp.netcheckbox

What is the best way to iterate through multiple iframes?

I need help figuring out how to load one iframe while having the next one in line to be displayed. Is there a way to create a script that cycles through multiple iframes after a certain amount of time? ...

javascriptjqueryhtmlajaxiframe

Issue with Textarea not updating when props change in a React component

I am facing an issue with updating the default value of a textarea based on props passed from a parent component. Strangely, the update works when using 'value' but not when using 'defaultValue'. However, I need the textarea to be edita ...

javascriptreactjscomponentstextarea

Is applying a bevel effect when hovering achievable?

Is there a way to add a bevel effect to my hyperlink image so it stays in place without moving down? I need the bevel effect to be inside the image as it keeps shifting position. Any suggestions would be greatly appreciated. I really need the bevel effect ...

htmlcssalignmentbevelled

CSS Menu Not Functioning Properly on iPad While Scrolling is Required

My CSS dropdown menu has mouseout and mouseover events but I'm experiencing issues on iPads and iPhones. The menu automatically closes when scrolling, making it difficult to open any links unless the menu is short enough to avoid scrolling. Does anyon ...

htmlcssipaddrop-down-menu

css code for styling html elements

HTML: <link rel="stylesheet" type="text/css" href="styles.css"><table border="0" cellpadding="0" cellspacing="0" class="month"> <tr><th colspan="7" class="month">January 2017</th></tr> <tr><th class="mon">Mo ...

htmlcss

Duplicate numerous Td elements

I am trying to manipulate a table with 3 columns and 6 rows by copying the contents of certain cells into a newly created column, inserting them in the middle of the table. Here is the desired outcome: https://i.sstatic.net/RVTfV.png This is the approach ...

javascriptjqueryhtml

Utilizing client-side storage within a React project

As part of my React challenge tracking app development, I am looking to implement a feature where users can click on a challenge button, approve it, and then save the chosen challenge name to local storage. Later, this saved challenge will be displayed in ...

javascriptreactjslocal-storage

Find the object in an array that has the most recent date property

Suppose I have an array of objects like this : let sampleArray = [ { "id": 5, "date": "2016-01-15T16:18:44.258843Z", "status": "NEW", "created_at": "2016-01-29T13:30:39.315000Z", "updated_at": "2016-01-29T13:30:39.315000Z", "requ ...

javascriptangularjsdate

Utilizing sourcemaps in ionic for seamless linking

I've encountered an issue with source maps or a similar feature. After inserting console.log(...) in my code, the message appears in the console but links to the compiled JavaScript file instead of the original TypeScript file. Have I overlooked som ...

javascriptangulartypescriptionic-framework

Fetch the user's email address from Auth0 using an asynchronous function

I am trying to load the user's email from Auth0 and store it in a constant. However, I am getting an arrow. I cannot identify the error. Can anyone help me find a solution? const userEmailInfo = async () => { auth0Client = await auth.createClien ...

javascriptnode.jsauth0sveltekit

What are some ways to utilize the <span> tag to apply distinct styles to specific characters within text compared to

Imagine I have a string like <p>hi my name is john</p>. I know that I can use the span element to target specific characters and apply different styles using CSS. But what if I want to style "name" and "john" differently from each other and the ...

cssxhtml

Value of type 'string' cannot be assigned to type '{ model: { nodes: []; links: []; }; }'

I am a beginner in TypeScript and I have added types to my project. However, I am encountering an error with one of the types related to the graph: Type 'string' is not assignable to type '{ model: { nodes: []; links: []; }; }'.ts(2322) ...

javascriptreactjstypescriptfunctionredux-toolkit

Is it possible to simultaneously run watchify and node-sass watch together?

Currently, I am utilizing npm scripts in conjunction with watchify and node-sass while incorporating the -w parameter. I am curious if it is feasible to execute both of these 'watch' commands simultaneously. Would this setup ensure that only sty ...

javascriptcssnpm