Items that do not commence from the start of the list

I'm encountering an issue with my unordered list where the li elements are not rendering properly. The first element seems to have a margin, and I'm unsure why this is happening. How can I fix this problem?

function App() {
  return (
    <ul
      style={{
        position: 'absolute',
        width: '75%',
        height: '5%',
        left: '12.5%',
        top: '25%',
        'list-style-type': 'none',
        'background-color': '#f8d7d7'
      }}
    >
      <li
        style={{
          width: '20%',
          float: 'left',
          height: '100%'
        }}
      />
      <li
        style={{
          width: '20%',
          float: 'left',
          height: '100%'
        }}
      />
      <li
        style={{
          width: '20%',
          float: 'left',
          height: '100%'
        }}
      />
    </ul>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

htmlcssreactjs

Answer №1

Here are a couple of reasons why this might be occurring:

  1. If your <ul> is set to have a position of absolute with a left 12%, it will create space on the left side.

  2. Additionally, if your <ul> has its own padding, this could also contribute to additional spacing at the beginning - you may need to adjust this based on your specific needs.

Answer №2

function App() {
  return (
    <ul
      style={{
        position: 'absolute',
        paddingLeft: '0px',
        width: '75%',
        height: '5%',
        left: '12.5%',
        top: '25%',
        'list-style-type': 'none',
        'background-color': '#f8d7d7'
      }}
    >
      <li
        style={{
          width: '20%',
          float: 'left',
          height: '100%'
        }}
      >list item 1 </li>
      <li
        style={{
          width: '20%',
          float: 'left',
          height: '100%'
        }}
      >list item 2 </li>
      <li
        style={{
          width: '20%',
          float: 'left',
          height: '100%'
        }}
      >list item 3 </li>
    </ul>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

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

Tips for effectively utilizing the useDraggable and useSortable hooks within the dnd-kit library

I'm currently working on developing a basic calculator using React and dnd-kit. The idea is to have draggable elements in the calculator that can be sorted within a droppable area with smooth animation effects. However, I've encountered an issue ...

javascriptreactjsdrag-and-dropdraggablednd-kit

Customizing TableRow Hover Effects in React with Material-UI

I've been spinning in circles with this issue. It seems like I just can't grasp how class overrides function in Material-ui. I attempted to follow the advice in this response: CSS on Material UI components However, it didn't produce any res ...

cssreactjsmaterial-ui

Troubleshooting problem with CSS overflow and absolute positioning on Android Browser

Our mobile web app was created using a combination of JQuery Mobile, PhoneGap, and ASP.net MVC. It is designed to function smoothly on both iOS and Android devices regardless of the browser being used. We have conducted tests on various devices and everyth ...

androidcsscordova

Is there a way to create a dynamic associative array using jquery?

I am looking to create an array structured like the following:- arr[0][from] = value arr[0][to] = value arr[1][from] = value arr[1][to] = value . . And so forth. I have input array html elements for the from & to fields. <input type="text" name ...

javascriptjqueryhtmlarrays

How can we verify if a React component successfully renders another custom component that we've created?

Consider this scenario: File ComponentA.tsx: const ComponentA = () => { return ( <> <ComponentB/> </> ) } In ComponentA.test.tsx: describe("ComponentA", () => { it("Verifies Compo ...

reactjstypescriptunit-testingjestjstdd

`Next.js project experiencing issues with scroll trigger functionality`

I've been working on a gsap animation with a scroll trigger, and while the animation itself functions fine, it's not triggering as expected. The AnimationEffect code involves using gsap and scrolltrigger to create the animation. The Hero section ...

javascriptreactjsnext.js

Using react-big-calendar exclusively for the month view

I need help customizing react-big-calendar to only show the month view and trigger a function when a date is selected. I want to remove all other functionalities related to week, day, agenda, and time display. Essentially, I just want to display the month- ...

javascriptreactjsreact-big-calendarreact-calendar

The CSS for the UI Grid is malfunctioning

I have been working on creating a grid using UI Grid (recent version of ngGrid) within my current project. However, I am facing some issues with the display. The icons like angle down and row selected icon are not showing up correctly when I include the CS ...

cssangularjstwitter-bootstrapng-gridangular-ui-grid

How to Customize Headers with Color and Size in MKDocs

In the following code, you'll find instructions for adjusting a dropdown menu that displays an image when expanded. The challenge is to reduce the size of the banner by half and remove the pencil icon on the left side. How can we modify the code so th ...

htmlmkdocs-material

Unnesting Django Endless Pagination in a Twitter-style format, how can I move a div outside of another div?

After implementing Django Endless Pagination with the Twitter Style and Show More option, everything seems to be working smoothly without any issues. I've even included media queries in the HTML render to help visualize the problem more clearly when r ...

jqueryhtmlcssajaxdjango-endless-pagination

Run the GetServerSideProps function every time the button is clicked

Struggling with my NextJS app development, I encountered an issue while trying to fetch new content from an API upon clicking a button. The server call is successful, but the update only happens when I refresh the page rather than triggering it with the bu ...

javascriptreactjsnext.js

Align component within material-ui grid

Looking to center align the same cards but not just the grid component, I need the content itself to be equally distant from the borders and each other. I've searched and tried different solutions without luck. https://i.stack.imgur.com/aZj7H.png htt ...

javascriptcssreactjsmaterial-ui

Updating Mysql data via a button on the homepage using the passed ID in the URL - a step-by-step guide

I have set up a Bootstrap modal popup for editing items on the home page. My goal now is to update the details of the selected item using PHP. In this case, I am passing the item id through the URL to select the item. After clicking the edit button, a po ...

phphtmljquerycssajax

Exploring the nuances of useEffect() functionality and the impact of extra re-renders

I ran some tests using a dummy component and noticed an unusual pattern in the console output: Rendering: 0 Triggered: 0 Rendering: 4 Triggered: 4 Rendering: 4 I'm having trouble figuring out why this is happening. On the first render, the foll ...

javascriptreactjsreact-hooks

Modify the URL of the button based on the chosen option

How can I dynamically change the URL of a button based on the selected option? For example, if someone selects "center", the button URL will be changed to "center.html". I have come across some examples that use the value in the option field. I have trie ...

jqueryhtml

Changing Meteor Template to a Node.js/AngularJS Conversion

My current website is built with Meteor using templates structured like this: <body> {{>section1}} {{>section2}} {{>section3}} </body> <template name="section1"> <h1>This is Section 1</h1> </template> ...

htmlangularjsnode.jstemplatesmeteor

Ways to utilize the map() function with data retrieved from an axios response?

Utilizing axios for data retrieval from the server and then storing it in the state. However, when attempting state.map( post => {console.log(post)} ), no output is displayed. The technologies being used are Express, Mongoose, NextJS, and Axios. My ap ...

javascriptnode.jsreactjsobjectaxios

The -webkit-background-clip feature seems to be malfunctioning in Safari

I am experiencing an issue where the code works perfectly on Chrome but fails to function properly on Safari. I have been unable to pinpoint the cause of this discrepancy and any assistance or insights would be greatly appreciated. For those interested, a ...

htmlcss

What is the best way to align an image to flex-end?

I recently started using React and ran into issues trying to align my image using CSS. Despite trying various methods like justifyContent, justifySelf, and floating right, I couldn't get the image to align on the right side of the screen without resor ...

cssreactjs

Creating a scrollable interface for horizontal button navigation

Is there a way to create a horizontal button scrollbar using only HTML and CSS? I want it to look like this: https://i.stack.imgur.com/RWFRt.png After searching online for a solution, I came up with the following code: .myBtnContainer{ display: gri ...

htmlcss