Issue with alignment of inline elements

I recently added a more button to my share buttons, sourced from simplesharebuttons.com, with the intention of revealing less popular social media icons on smaller screens. However, I am encountering an issue where the button is not aligning with the rest of the buttons. I have tried troubleshooting but have been unable to identify the source of the problem.

http://jsfiddle.net/WLSqw/41/

#share-buttons img {
    width: 35px;
    padding-right: 5px;
    display: inline;
}

#more {
    width: 35px;
    margin-right: 5px;
    background: #ccc;
    display: inline-block;
    border-radius: 50%;
    color: white;
    font-size: 1em;
    text-align: center;
    line-height: 35px;
}

Answer №1

Indeed, as an inline-block element, the only adjustment needed for your #more is:

vertical-align: top;

See it in action here

Answer №2

Apply float:left; to the hyperlinks and the specific button

CodePen

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

Ways to position a DIV on the right side of the screen using percentage margin to adjust its distance from the edge as the browser is resized

Allow me to provide a clearer explanation here: Imagine an element placed on a webpage with a margin of 10% from the left side. When the size of the page is adjusted, the margin on the left decreases accordingly - for example, 10% from 1400px - 140px, and ...

Material selection through span in three.js is not functional

Initially, the span element was functioning properly for me. However, after setting up materialsLib and initMaterialSelectionMenus based on the documentation and examples, the span stopped working and now the model is not visible. Any assistance would be g ...

Enhanced Interactivity: jQuery UI Dialog Button Transforms Position upon Mouse Hover

I am utilizing the jQuery UI dialog feature and implementing buttons using jQuery in the following manner: $("#151").dialog({ autoOpen: false, autoResize: true, buttons: { "OK": function ...

Creating a CSS3 web design inspired by the Facebook-image style - here's how!

Looking to create a design using CSS that mimics the facebook-image-container, similar to this example: . Seeking advice on how to achieve this effect. The concept is to have a centered box on the page, with one half displaying an image and the other conta ...

Duplicate text content from a mirrored textarea and save to clipboard

I came across some code snippets here that are perfect for a tool I'm currently developing. The codes help in copying the value of the previous textarea to the clipboard, but it doesn't work as expected when dealing with cloned textareas. Any sug ...

Refresh iOS / iPad website only upon scrolling, not when utilizing anchor links

Currently, I am in the process of troubleshooting this website: This site is hosted on a LAMP server and is utilizing CMSMS 2.1x, if that detail makes any difference. (By the way, the smarty components are causing some performance issues.) While the desk ...

Autofill with JavaScript - Dynamic Form Population

Looking to create a form-based HTML page. The objective is to have the second input box automatically populate based on the user's input in the first input box. I've gone through various guides and tried to implement this script, but it doesn&ap ...

Implementing a sticky second Navbar with Bootstrap 5 and Vanilla JavaScript to stay fixed at the top during scrolling

I am currently working on a project that involves two navbars. The first navbar is dedicated to contact information, while the second navbar contains menu links. My goal is to have the second navbar fixed at the top of the page when scrolling, and I am lo ...

The PHP code fails to run and instead displays as raw PHP code on the webpage

As someone new to web development, I am diving into the world of PHP for the first time. So please excuse my ignorance as I navigate through this process. The task at hand involves creating a website with an HTML form that sends emails. After doing some r ...

Separate the business logic from the HTML code in Angular to prevent repetition and make the code

I have a lengthy HTML code with ngSwitch for 3 cases and 4 small cases within the default case, all using the same icon structure. How can I shorten my HTML code and eliminate business logic from it? The hierarchy to display different icons is: Servicefl ...

Customize items within a bootstrap5 navbar by utilizing traditional CSS styling techniques

Hello everyone, I'm currently working on creating a navigation bar using Bootstrap 5. I am looking to customize the colors of certain elements such as the navbar, tags, navbar background, and burger menu. I've attempted to adjust the tags' c ...

The code is triggering IE 8 to switch to compatibility mode resembling IE7

I have created a custom javascript function that generates a pop-up, and I am invoking this function in my code. However, every time I click the button, the browser switches to IE 7 compatibility mode and the pop-up appears behind the button. Below is my ...

A guide to transforming rows into columns with CSS

Hello, I am trying to convert rows into columns using CSS. Currently, my code looks like this: <style> .flex-container { max-width: 500px; width: 100%; display: flex; flex-wrap: wrap; } .flex-item { ...

Inserting an Excel spreadsheet into a webpage as a table

Looking for a quick and easy way to include an Excel spreadsheet on a website? Let's say you need to display a table with 100 data points in an HTML or PHP file. ...

The command `browser.find_elements_by_class_name('foo')` returned zero results

I'm encountering an issue with selenium while using Python 3.7. The website I'm working on has a structure similar to this: <html> <body> <div class="foo"> <div class="bar1">some ...

A Guide to Configuring jQuery UI Slider with Three Distinct Colors

I'm currently implementing the UI Slider on my website. However, I would like to customize the slider with three different colors: Handle Color Previous portion of Handle Next portion of Handle I want it to look something like this: Currently, I h ...

Hover over the text below to see an image appear in its place

I'm looking to swap out some text with an image when hovering over it, using basic HTML/CSS. NO: show the image below the text NO: display the text on top of the image NO: replace one image with another YES: replace the text with an image ...

Ways to remove the line under a logo in HTML using CSS and Bootstrap

While working on a website design, I encountered an issue with the logo where it has a line of the background color under it. This is frustrating and affects the overall design. Does anyone have a straightforward solution to remove this line? I need someth ...

Excessive space being taken up by the final character in the Material-UI Autocomplete arrow endAdornment

<Autocomplete {...defaultProps} id="disable-close-on-select" disableCloseOnSelect renderInput={(params) => ( <TextField {...params} label="disableCloseOnSelect" variant="standard" /> )} /> Click h ...

Building a DIV Element in the Space Between a Header and Footer Using HTML and CSS

I'm attempting to get my DIV element (MainPageImage) to cover the entire screen area, situated between the header and the footer. Here's my HTML code: body { padding: 0; margin: 0; overflow-y: scroll; font-family: Aerial; font-size: ...