Show two spans, each underneath the other

I am looking to showcase two span elements, one below the other. Take a look at my HTML code snippet

<img class="profile-photo margin-0"
            data-ng-if="!question.isOpen"
            ng-src="{{question.profilePicId ? question.profilePicId : defaultUserAvatar}}"/>
<span ng-if="!question.isOpen" class="margin-left-10 title"
            ng-bind="question.title | translate"></span>
<span ng-if="!question.isOpen"
            ng-bind="getFirst100CharactersOfQuestion(question)"></span>

Despite trying to utilize <div> tag with properties like display: inline, float: left, and clear: left, it didn't yield the desired outcome.

htmlcssangularjsimagefrontend

Answer №1

To change the default display of span from inline to block, simply add the CSS rule display: block

.title {display:block}
<span class="margin-left-10 title">hello</span>
<span>world</span>

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

Having trouble with positioning divs on top of each other? Struggling to get position absolute to work correctly?

Currently, I am utilizing flexbox to construct a grid layout. However, I have hit a roadblock when attempting to make the divs stack on top of each other. The overflow:auto is hidden and position relative has been added to the carddiv. While the divs are s ...

htmlcssreactjs

The hue of the knob is unchangeable once the server data request is made

Upon receiving data from the server request, I am unable to update the color of the knob to match the image provided at this link screencast. Below is my code: JavaScript Code $scope.options = { /* knob option */ }; $http .get(url) .then(functio ...

javascriptangularjs

What could be causing my PHP mail script to report success but fail to deliver the email?

Previously, I have successfully used the same script and AJAX query to manage emails without any issues. However, on this particular site, it seems that the process is not functioning properly. Although the POST request indicates success, no email is being ...

phphtmljqueryajax

Enhance the appearance of a button in Rails by incorporating custom styles or images

I am currently working with Rails and I am curious if there are any simple ways to enhance the appearance of the button_to control. Is it possible to style the <%= submit_tag 'Log in' %> or <%= button_to "Show Me", {:controller => ...

ruby-on-railscssstylesheet

Disable the parent CSS styling when focusing on the child button

Within an anchor tag, I have a div element. The CSS on the :active state is set to transform the element, but I want to avoid this behavior when focusing on the child element bx--overflow-menu. I am working with NextJS using styled-jsx and SaSS. Here is my ...

cssreactjssassnext.jsstyled-components

Achieve inline or floating displays seamlessly without the need for media queries to prevent breaking

Whenever I attempt to apply float left or display inline, it causes issues. The form currently has a max-width of 1000px. I was hoping that the first and last names would automatically align side by side if there is enough space. Perhaps setting a min-widt ...

htmlcssinlinedisplay

Troubleshooting Node.js and Express: Adding to array leads to displaying "[object Object]"

As a newcomer to web development and currently enrolled in a course for it, I am in the process of creating a test web server before diving into my main project. In this test scenario, my goal is to extract the value from a text block and add it to a respo ...

javascripthtmlarraysnode.jsexpress

Bind Vue.js 2 component's data property to the very first instance of the component or to a single instance only

Seeking assistance. I am relatively new to Vue.js and require some guidance. Scenario: I have a component with BS modal inside, which is rendered in a loop and has multiple instances. Problem: The first rendered component receives its data from the p ...

vue.jsvuejs2frontendvue-componentv-model

A problem arises when the ng-click function attempts to use $index as a parameter, resulting in

I am currently attempting to iterate through an array and generate a list item for each object within it. However, when I try to add an ng-click to the list item, I encounter the following error, even though the code appears to be correct. Syntax Error: ...

angularjs

The combination of Google Maps and CSS transforms causes a blur effect on the page

After implementing the CSS Transform technique to center a div both horizontally and vertically, the desired effect was achieved. However, an unexpected issue arose on pages that contained a Google Maps iframe causing the entire page to go blurry. To view ...

htmlcssgoogle-mapstransform

How to selectively load specific scripts in index.html with the use of angular.js

Let me address a problem I'm facing with a large development project. It seems that the current setup does not function properly on Internet Explorer. My idea is to only load files that are compatible and do not generate errors when accessed through I ...

javascriptangularjs

The navigation icon on my website refuses to close

Hey there, I'm having some trouble creating a side navigation menu. The issue I am facing is that the menu opens without any problem, but then I can't seem to figure out how to close it using a second "onclick()" function. If you could take a lo ...

javascripthtmlcss

How can I use the XBee API to search for a router or end device?

I am currently embarking on a weekend project to create a simple AngularJS web application that can control XBee modules using an Arduino connected to an XBee Coordinator. In short, I am wondering if there is a way to detect other modules that have joined ...

angularjsarduinoxbee

Creating two divs with equal heights in React using Material-UI at 50% each

I am currently utilizing a Material UI template within a react JS project. My goal is to create a div (or Grid in MUI) that spans 100% of its container's height, containing two nested divs (or Grids) that are each set at 50% height. If the internal c ...

cssreactjsmaterial-ui

How can I center two div buttons within a bootstrap column?

My issue is as follows: I currently have two circles stacked on top of each other, but I would like to position them side by side. Below is the HTML for the existing layout: <div class="col-lg-6"> <div class="page-scroll" style="text-align:c ...

htmlcsstwitter-bootstrap

Minimize the gaps between items within a CSS grid design

I'm struggling with adjusting the whitespace between 'Job Role' and 'Company Name' in my grid layout. Here's a snippet of what I have: The container css is set up like this: .experience-child { display: grid; grid-tem ...

htmlcsscss-grid

Sending data from Angular to the DOM

Is there a way to dynamically pass a property to an HTML tag using Angular? <div class="my-class" data-start="10"> I am trying to figure out how to pass the value of data-start dynamically. This is for an Angular 5 application. Any advice would be ...

htmlangularangular-directive

Return to the initial stage of a multistep process in its simplest form following a setTimeout delay

I recently customized the stepsForm.js by Copdrops and made some modifications. Although everything works well, I'm struggling to navigate back to the initial step (first question) after submitting the form due to my limited knowledge of JavaScript. ...

javascriptjqueryhtmlcsssettimeout

Merge ReactCssTransitionGroup with React-route's Link to create smooth page transitions

React.js I'm facing an issue with the React.js code provided below. My goal is to set up the animation before transitioning to a new page using "React-router.Link" and ReactCSSTransitionGroup. Version: react: '15.2.1' react-addons-css-trans ...

javascriptcssreactjsreact-routerreactcsstransitiongroup

Is there a way to customize the outlined color of an input adornment in MUI?

Looking to customize the default blue color in a Form Control outlined variant, but can't figure out how. I was able to do it with a regular TextField, but this one is a bit trickier. <FormControl variant="outlined"> < ...

javascriptreactjsmaterial-uifrontendui-design