React配速计算器布局调整：实现标签左对齐与输入框独立对齐

要实现标签左对齐且输入框组整齐对齐的效果，只需调整CSS布局属性并优化结构，以下是修改后的完整代码：

修改后的React组件代码 #

// to use jsx 
import React, {useState, useEffect} from 'react';
import Logo from '../components/Logo';
import './styles.css'


// to reactcomponent(by function)

function Home() {
   const [message, setMessage]=useState([]);
   useEffect(()=>{
     fetch("/test/hello")
         .then((response)=>{
           return response.json();
         })
         .then((data)=>{
             setMessage(data);
         });
   },[]);
   return (
      <div>
         <div className="logo-container">
         <Logo />
         <h1 style={{ fontSize: '40px', color: '#333333' }}>Pace Calculator</h1>
         </div>

         <div className="input-container">
      <div className="input-group">
        <label className="label">
          <span className="label-text">Distance</span><span className="colon">:</span>
          <input className="input-field" type="text" placeholder="min" />
          : 
          <input className="input-field" type="text" placeholder="sec" />
          <span className="unit">/km</span>
        </label>
      </div>

      <div className="input-group">
        <label className="label">
          <span className="label-text">Time</span><span className="colon">:</span>
          <input className="input-field" type="text" placeholder="hr" />
          : 
          <input className="input-field" type="text" placeholder="min" />
          : 
          <input className="input-field" type="text" placeholder="sec" />
        </label>
      </div>

      <div className="input-group">
        <label className="label">
          <span className="label-text">Pace</span><span className="colon">:</span>
          <input className="input-field" type="text" placeholder="min" />
          : 
          <input className="input-field" type="text" placeholder="sec" />
          <span className="unit">/km</span>
        </label>
      </div>
    </div>
    <button className="calculate-button">Calculate</button>

    </div>
   );
 }
 
export default Home;

修改后的CSS样式代码 #

/* styles.css */

.input-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 替换center为flex-start，实现整体左对齐 */
  border: 2px solid #333;
  border-radius: 10px;
  padding: 20px;
  max-width: 500px;
  margin: 0 auto 20px;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  width: 100%; /* 让每个输入组占满容器宽度，保证内部元素排列规整 */
}

.label-text {
  display: inline-block;
  width: 100px; /* 固定标签宽度，确保三个标签对齐一致 */
  font-size: 30px;
}

.colon {
  margin-right: 10px;
}

.input-field {
  width: 60px;
  height: 30px;
  border-radius: 5px;
  margin: 0 5px;
  padding: 0 5px;
}

.unit {
  margin-left: 5px;
  font-size: 20px;
}

.calculate-button {
  margin-top: 30px; 
  background-color: #808080; 
  color: #fff; 
  padding: 10px 20px; 
  font-size: 30px; 
  cursor: pointer;
  border: none;
  border-radius: 5px;
  display: block;
  margin: 0 auto;
}
.calculate-button:hover {
  background-color: #1b1b1b;
}

关键调整说明 #

• 调整.input-container的align-items属性为flex-start，实现整体内容左对齐
• 给标签文本添加.label-text类并设置固定宽度，确保三个标签（Distance/Time/Pace）宽度一致，对齐整齐
• 给.input-group设置width: 100%，让每个输入组占满容器宽度，内部元素排列更规整
• 优化输入框和单位文本的间距，提升整体视觉体验

内容的提问来源于stack exchange，提问作者MIN YOUNG CHOE