I'm having trouble getting my list to display horizontally. I've tried using display: inline, as well as float: left; and position:center, but can't seem to get it centered properly.
JavaScript
Array.prototype.map.call(document.querySelectorAll('.memberinfo'), function(el) {
el.style.display = 'inline';
});
CSS
.groupmember ul
{
margin:0;
list-style-type: none;
text-align:center;
}
.groupmember ul li
{
display:inline;
}
It seems you are generating a new unordered list ul for each $memberinfo, causing the display property to render as inline, but with the ul elements remaining as block elements.
To address this, consider creating the ul tag before the foreach loop and closing it after, ensuring that your list items are displayed as intended:
echo "<ul>";
foreach ($memberinfo as $info) {
echo "<li><a href='profile.php?user_id=" . $info['user_id'] . "'><img class='group_member_img' src='uploads/" . $info['avatar'] . "'/><br>" . $info['surname'] . " " . $info['name'] . "</a></li>";
}
echo "</ul>";
Additionally, the use of the break line br tag is unnecessary in this context since you aim to display each li element side by side.
One effective solution in this case would be to utilize display: inline-block.
.groupmember ul li {
display:inline;
}
display: inline is most suitable for elements that are not nested with other elements.
display:inline is quite restrictive and does not allow for any block-level styling to be applied to it.
A better approach would be to utilize display:inline-block or employ float:left.
Remember, if you opt for floats, you must define the overflow of the parent element as overflow:auto (use visible for IE 8) in order for it to function properly. Start with inline-block first.
When a button is clicked, the paragraph area should display while pushing down the next button/div and the rest of the page below it. In simpler terms, clicking on the button reveals the box without overlapping other elements. I apologize for any language ...
<script> $(document).ready(function () { $("#logo_").hide(); $("#logo_learn").hide(); }) function sl() { $("#logo_learn").slideToggle(500); $("#logo_").fadeIn(); } function hl() { $("#logo_learn").slideToggle(500); $("#logo_ ...
Unique Case Working on a Gatsby site with Tailwind CSS has brought to light an interesting challenge regarding different types of content. While the blog pages fill the entire viewport and offer scrolling options for overflowing content, other pages with ...
My priority is to ensure that my images load as quickly as HTML and CSS. Currently, the loading time for images (all in .svg format and small) exceeds 2 seconds after other content loads, despite HTML and CSS loading swiftly. Is there a method to expedite ...
Is there a way to simplify this lengthy HTML code used for browser alerts? Here is an example: <div class="ie-message" style="display: block; "> <div class="alert error"> <h2> Sorry, your web-browser is outdated ...
My Current HTML Form Situation Currently, I have an HTML form set up with a text input field and a submit button. When the button is clicked, I want the output results to display in only a specific part of the page without refreshing the entire page. Ste ...
Is there a reliable JavaScript library that can automatically format an HTML code string? I have a string variable containing unformatted HTML and I'm looking for a simple solution to beautify it with just one function call. I checked npmjs.com but co ...
The outline color of the title in the input textbox appears differently in Google Chrome, and the bottom border line looks different as well. <input type="text" title="Please fill out this field."> https://i.stack.imgur.com/iJwPp.png To address th ...
Hey there, I'm currently in the process of learning JS and trying to fetch data from an API. I've successfully fetched all the work from api/works and displayed them in a div. Now, I'm looking to create 3 buttons that represent 3 categories ...
I'm encountering a "cannot GET" error whenever I try to run my application on a live server using VS Code. My assumption is that the issue lies within my routing configuration, but I'm struggling to identify the exact problem. Any assistance woul ...
filename - Header.jsx import { useEffect, useState } from 'react' import { getValue } from './Input' import TextField from '@mui/material/TextField'; export const Header = () => { const [search, setSearch] = useState( ...
Currently, I am in the process of constructing a tab component and establishing inline variables for CSS styling. This particular project involves a streamlit app that allows me to modify settings on the Python side. At the moment, there are four elements ...
Why does the table lose focus every time I press tab instead of inserting a white space? How can I change this so that pressing tab just inserts a regular tab space? ...
After receiving JSON response, my goal is to extract all "Id" and "Pages" values and store them in an array or list for further processing [ { "Page": 1, "Content": [ {"Id": 100000000000001,"Title": "title1", ...}, {"Id": 100000000 ...
I recently embarked on a project to create an HTML page utilizing Materialize CSS and Bootstrap. My goal was to incorporate cards representing YouTube videos, along with a search bar that could filter through the cards and display the relevant one. However ...
I have a website page at the following link: However, the content is not centered on the screen. Here are the codes I'm using: <div class="section_inner"> <div class="container"> <div class="row"> <?ph ...
I am seeking a solution to ensure that the children inside my scrollable div are only visible in their entirety. HTML <div id="container"> <div class="child"></div> <div class="child"></div> <div class= ...
.step-1-4 { background:url('../images/gadget-4-sprite.png') no-repeat; width:950px; height:70px; margin-left: 15px; } The code above sets the CSS for a div containing a background image. The dimensions of the div match that of the imag ...
My website platform doesn't assign any IDs or classes to the menus it generates, and uses nested lists for submenus. To make the submenus expand upon clicking, I created a jQuery script: $(function () { $(".wrapper ul li").click(function () { ...
We've implemented the jQuery jqtransform plugin to enhance the appearance of our website's forms. However, there is one particular form that we'd like to exclude from this transformation. I made adjustments to the script that applies jqtrans ...