Troubaking CSS issue with Inline-block display

I am currently troubleshooting a display issue that is visible below: Here's the HTML code:

<span class="pw_brand_product_list"><div class="wb-posted_in">Brand:</div><a href="https://www.google.com">My First Brand</a></span>

and this is the corresponding CSS:

.wb-posted_in {display:inline-block; margin:5px}

When I input all of this into JSFiddle, it displays correctly as "Brand: My First Brand." However, when I integrate it into my website, it does not appear as expected and still shows as:

Brand:

My First Brand

Could someone help me figure out what's going wrong? I suspect it might be a simple mistake given by a beginner. I even attempted using !important but it did not have the desired effect.

css

Answer №1

After reviewing the page you provided a link to, I noticed that the .wb-posted_in element had a CSS property of width: 100%. By changing this to width: auto, it appears to have resolved the problem.

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

Is there a way for me to implement a submission counter for forms?

Hello! I am currently developing a pledge page and I have a question about incorporating a counter that updates each time a user submits the form. I would like it to display something similar to this: [ Thank you for committing to take the pledge. Curren ...

javascripthtmlcssjson

Prevent bootstrap columns in a single row from adjusting their heights uniformly

After spending a good amount of time reading through various questions and attempting to solve my issue, I am finally seeking help from all of you. This is what I currently have: The code in action I am aiming for the following outcome: Desired result ...

htmlcssbootstrap-4

Using the jquery plugin Sidr in Rails: A complete guide

I've been attempting to integrate the jQuery sidr plugin into my Rails project on Codecademy, but unfortunately, it's not functioning as expected. To view the page, simply click here: If you notice, the menu icon at the top left takes some time ...

javascriptjqueryhtmlcssruby-on-rails

Expanding the screen size on a HTML page using Mac OS X

How can I replicate the feature on this website: When clicking on the notebook logo in the top left corner, the page automatically goes into full screen mode on Safari on Mac OS X. How can I implement this feature? ...

htmlcssmacos

What is the syntax for accessing this selector using child/parent notation?

Hello, I'm trying to figure out how to access the text object using the child parent CSS selector notation. https://i.sstatic.net/ox2ur.png For example, if $(#mydivID > svg) would get my SVG object which has no class name or ID, then how would I ...

javascriptjquerycssd3.jsselector

How to align text to the right in a Bootstrap 5 card header

I'm facing an issue with a Bootstrap 5 card where I want to align certain content in the header to the right and some to the left. Despite my efforts, everything remains left-aligned. Here's a snippet of my code: <div class="card"& ...

csstwitter-bootstrapbootstrap-5

What steps can I take to improve the design of this layout created using Twitter Bootstrap?

Currently, I am designing a sample form layout using Twitter Bootstrap. The form displays fields horizontally, with a link between each field. My goal is to have bullet points appear on the right side of the fields when the link is clicked. However, the al ...

htmlcsstwitter-bootstrap

Element that remains fixed within an element that cannot be scrolled

I am facing a challenge where I have a button nested inside a section that needs to maintain a fixed position within the parent container ('.container') while scrolling through the page. The catch is that the section itself does not scroll and ca ...

htmlcss

What is the best way to create a line break within a loop in React?

I have a react component that I need to format into multiple lines, specifically having 2 boxes on top and 3 below in a looped return. The desired layout is to stack the boxes in 2x2 or 2x3 depending on the total number of boxes generated by the loop. So, ...

javascriptcssreactjs

Unable to adjust the width of a Bootstrap table

I'm currently working with a bootstrap table that looks like this <table class="table table-bordered table-striped table-highlight"> <tbody> <tr> <td align="center" style="width:30%"><input type="text" class="form-control ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to implement coding for portrait styles specifically on the Kindle Fire device?

Any recommendations on how to specifically code the styles for portrait orientation solely on the Kindle Fire device? ...

htmlcsstabs

Tips for directing specific mouse interactions to the underlying elements within an SVG

I'm working with a scatterplot that includes a brush layer for zooming in on the data and voronois for mouse hover snapping. However, I've encountered an issue where the click event doesn't fall through to the brush layer when the voronoi pa ...

javascriptjquerycssd3.jssvg

Issues encountered with certain Tailwind styles functioning improperly when deployed in a production environment with Next.js

It seems that there are some style issues occurring in the production build hosted on Netlify for a specific component. The problematic component is a wrapper located at ./layout/FormLayout.tsx. Below is the code for this wrapper: const FormLayout: React.F ...

javascriptcssreactjsnext.jstailwind-css

The font-awesome fa-thin icon does not display properly, but the fa icon does work

When I use the following code on my website, it works perfectly: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"/> <i class="fa fa-bars" style="color: #ffff ...

htmlcssfont-awesome

Implement a CSS transition when switching between images

On my website, I have a feature that switches between a down arrow and an up arrow. You can view it here. I would like to implement a CSS transition so that there is a brief pause between the switch. How can I achieve this? Below is the code snippet: ...

javascriptjqueryhtmlcss

How can I ensure that buttons in a row utilize the full 100% of available space?

I have a row of buttons in my HTML code like this: HTML : <div class="buttons"> <div><input type="button"/></div> <div><input type="button"/></div> <div><input type="button"/></div& ...

htmlcss

What measures can I take to prevent images from being easily saved from my website?

Have you noticed that background images cannot be saved by simply long pressing or right clicking on them? In order to save the picture to your hard disk, you'll need to save the entire webpage. Is there a way to make a picture harder to save, such as ...

htmlcss

Difficulty encountered in getting html email signature to appear correctly on Outlook

I have developed a personalized email signature using HTML. Here's the unique code: <html> <!-- Insert your company logo here --> <div id="far_left" style="width: 50px; height: 50px; float: left; ...

htmlcssoutlook-2010email-clientsignatures

Achieving Vertical Centering in Bootstrap: A Step-by-Step Guide

Creating a mobile-optimized website using bootstrap 4. Currently struggling to vertically center an element within the available space. The element consists of a title with fixed size, a message, and 2 buttons in a div. Need to ensure it is vertically cent ...

htmlcssbootstrap-4

The H1 tag fails to appear on the webpage

I can't figure out why my H1 is not visible. It seems to be hidden by a div. What's strange is that the parent div is visible when I change the background color to something other than transparent. Even an input tag within the same div displays c ...

htmlcsssasscss-animations