组件(Widgets)设计：实现统一外观及图片右侧文本对齐方案咨询

现有应用组件尺寸基本一致，新增功能组件的尺寸差异影响不大，当前需解决时钟图片与右侧文本的间距问题，希望文本紧贴图片右侧。

当前显示效果：

解决方法 #

要实现文本紧贴图片右侧，核心是给包含图片和文本的容器设置弹性布局（flex），同时清理无效样式，具体操作如下：

1. 给.widget容器添加flex布局，让内部元素横向排列
2. 移除HTML中图片的float:left和文本的justify-content:start这类无效行内样式（justify-content是容器属性，作用于子元素不生效）
3. 可选：若需微调间距，可给图片设置极小的右边距（如margin-right: 4px），或保持默认无间距

修改后的CSS代码 #

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.nav-lijst {
  list-style-type: none;
}

.list-item {
  display: inline-block;
  padding: 10px 5px;
  margin-left: auto;
  margin-right: auto;
}

.picca {
  height: 5vh;
  filter: brightness(0) invert(1);
}

.app {
  width: 100%;
  display: flex;
}

.menu-picca {
  height: 10vh;
}

.imglabel {
  box-sizing: border-box;
  padding: 1px 10px 1px 1px;
  text-align: center;
}

.fig {
  text-align: center;
  border: 1px dotted gray;
  padding: 10px 10px;
  margin-left: auto;
  margin-right: auto;
}

.widget {
  border: 1px dotted gray;
  padding: 10px 10px;
  margin-left: auto;
  margin-right: auto;
  /* 关键：启用flex布局实现横向排列 */
  display: flex;
  /* 可选：让图片和文本垂直居中对齐 */
  align-items: center;
}

修改后的HTML代码 #

<li class="list-item">
  <figure class="fig">
    <img class="menu-picca" src="https://via.placeholder.com/100">

    <form action="uploadplanning.php" method="post" enctype="multipart/form-data">
      <input type="file" name="fileToUpload" id="fileToUpload">
      <input type="submit" value="Upload Planning" name="submit" class="btn btn-primary">
    </form>
  </figure>
</li>

<li class="list-item">
  <div class="widget">
    <img class="menu-picca" src="https://via.placeholder.com/100">
    <p>Neef</p>
  </div>
</li>

说明 #

• display: flex使.widget内部的图片和文本成为弹性项目，默认横向排列，自然紧贴
• align-items: center可让图片与文本在垂直方向居中对齐，优化视觉协调性
• 移除无效行内样式，避免样式冲突导致的布局异常

内容的提问来源于stack exchange，提问作者kucb