#mainContainer { display: flex; justify-content: center; /* 水平居中 */ max-width:500px; margin: 0 auto; /* 居中 */ padding: 20px; } #searchBox { width: 150px; /* 初始宽度 */ transition: width 0.3s; /* 宽度变化的过渡效果 */ } #searchBox input { width: 100%; /* 使输入框填满整个容器 */ } #searchBox:focus-within { width: 200px; /* 聚焦时的宽度 */ } #searchButton { padding: 0; /* 移除内边距以减少按钮大小,使其与输入框对齐 */ margin-left: -25px; /* 使按钮紧贴输入框 */ background-color: transparent; /* 使按钮背景透明 */ border: none; /* 移除边框 */ } #resultsContainer { box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* 为搜索建议添加阴影 */ z-index: 1000; /* 确保搜索建议在其他元素上方显示 */ border-radius: 5px; /* 为容器添加圆角 */ overflow: hidden; /* 防止子元素溢出容器圆角 */ background-color: #fff; /* 为了更好的视觉效果,可能需要设置背景色 */ } .ui.list.bordered { border: 1px solid rgba(34,36,38,.15); /* 添加边框 */ box-shadow: 0 1px 2px 0 rgba(34,36,38,.15); /* 添加阴影 */ } .ui.list{ margin: 0;; } #resultsContainer .item { width: 100%; box-sizing: border-box; padding: 10px 15px; margin-top: 5px; margin-bottom: 5px; /* 在项之间添加一些间隔 */ border: none; /* 确保没有边框 */ transition: background-color 0.3s; /* 添加背景色变化的过渡效果 */ } #resultsContainer .item:hover { background-color: #e2e2e2; /* 鼠标悬浮时的背景色 */ } #suggestionContainer { display: none; } #resultsList { padding: 10px; background-color: #0f0f0f; /* 为结果列表添加背景色 */ border-bottom: 1pxrgb(42, 36, 36)#ddd; /* 在列表和答案之间添加一条边界线 */ } #answerContainer { padding: 10px; background-color: #f7f7f7; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); font-family: Arial, sans-serif; color: #333; font-size: 16px; line-height: 1.6; display: none; } #feedbackContainer { margin-top: 10px; align-items: center; border-top: gray solid 1px; padding: 5px; min-height: 30px; } #likeButton, #dislikeButton { cursor: pointer; margin-right: 10px; float: left; } #copyButton { cursor: pointer; float: right; } #likeButton:hover, #dislikeButton:hover, #copyButton:hover { color: #007bff; }