Kelly Stone ❣

#fb .my-comment-wrapper {
  display: flex;   /*把留言和照片變成水平排列*/
  align-items: center;
  margin-top: 12px;
}

#fb .my-comment-wrapper .my-comment {
  background-color: #f2f3f5;
  border: 1px solid #ccd0d5;   /**邊界 border: 字體大小  樣式  顏色**/
  border-radius: 16px;
  display: flex;
  align-items: center;
  cursor: text;
  flex: 1 1 auto;
  line-height: 16px;
  padding: 7px 12px;
}

#fb .my-comment-wrapper .my-comment .my-comment-placeholder input[type=text] {
  width: 410px;
  outline: none; /*預設有灰線*/
  border: 0px solid transparent;
  background: transparent; /*與下方背景顏色相同*/
  font-size: 14px;
}

#fb .others-comment-wrapper {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;  /**由元素左邊開始排列**/
}

****推薦參考這個網站

https://wcc723.github.io/css/2017/07/21/css-flex/

#fb .others-comment-wrapper .people-comment-container {
  background-color: #f2f3f5;
  border-radius: 18px;
  color: #1c1e21;
  line-height: 16px;
  padding: 8px 12px;
  position: relative;
}

/*Postion*/
/*position設定absolute，該元素就會完全跳脫該頁面，原本所占用的空間將不復存在。脫離了父元素的範圍，寬度就會以內容為基準。*/
/*position設定relative，該元素位置設定會以原本為基礎移動的*/

#fb .others-comment-wrapper .people-comment-container .people-name a {
  text-decoration: none;
  color: #365899;
}

#fb .others-comment-wrapper .people-comment-container .people-name:hover {
  text-decoration: underline;
}

/**CSS text-decoration 屬性的功能是可以用來設計網頁文字的修飾線條，

例如常見的文字上線（overline）、文字刪除線（line-through）以及文字底線（underline）**/