时间戳

首页 > 解决方案 > ul 元素在反应中没有定位在中心

html - ul 元素在反应中没有定位在中心

问题描述

我正在做一个 react 项目，我已经构建了所有组件，但是当我运行项目时，我在组件中使用的所有 ul 元素似乎都不在中心，它们稍微向组件的右侧移动.

这是我的输入字段代码

const NumberFactsInputs = ({ state, inputChange }) => {

    if(state.categoryValue === 'trivia' || state.categoryValue === 'math') {
    return(
            <div>
            <ul >
              <li> <input  className='br3 dib pa1 ma2 bg-lightest-blue bn' value={state.number} type='number' placeholder='Number'  onChange={inputChange} /></li>
              <li> <input readOnly className='br3 dib pa1 ma2 bg-lightest-blue bn' value={state.date} type='number' placeholder='MM/DD' style={{opacity: 0.4}} onChange={inputChange} /></li>
              <li> <input readOnly className='br3 dib pa1 ma2 bg-lightest-blue bn' value={state.year} type='number' placeholder='YYYY' style={{opacity: 0.4}} onChange={inputChange} /></li>
            </ul>
            </div>
        );
   }

这是我在容器组件中的主要渲染功能，我试图将所有内容都放在中心，但 ul 元素并没有完全居中。

    render() {
        return(
        <div className='tc bg-light-blue dib br3 pa3 ma3 bw2 shadow-5'>
        <h1>Number Facts</h1>
        <NuberFactsCategories  changeCategory = {this.onChangeCategory} />
        <NumberFactsInputs state={this.state} inputChange={this.onInputChange} />
        <DisplayText text={this.state.displayText}/>
        <ul style={{listStyle: 'none'}}>
        <li style={{ display: 'inline-block' }}> <SubmitButton buttonClick={this.onButtonClick} /> </li>
        <li  className='ml3' style={{ display: 'inline-block' }}> <RandomButton randomClick={this.randomButtonClick} /> </li>
        </ul>
        </div>
        );
        }

}

网页的图像，在这里你可以看到，输入字段和按钮不在中心。 在此处输入图像描述

这是我用于输入字段的 css 文件。

li {
    list-style: none;
    display: inline-block;
}

input {
    width: 70px;
    text-align: center;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

没有用于按钮的 ul 元素的 css 文件，所有样式都是使用内联样式块完成的。

标签： htmlreactjsjsx

解决方案

所以问题是listStyle=none只从ul元素中删除项目符号点，如果您遇到此问题，您只需要确保您也padding从列表中删除。

所以只需应用于padding: 0元素ul，你就可以开始了:)

推荐阅读