CSS網站（很多）問題

css 網站

CherryYang 2022-05-12 10:38:02 ‧ 2695 瀏覽

分享至

更新：問題1、3已解決
請問各位前輩：
1.綠色的border在螢幕寬度變窄時，會超出螢幕，有什麼方法可以救嗎？

2.螢幕寬度越窄，第二行文字和第三行文字間距會越大，該怎麼辦？

3.如何讓導航欄裡的文字強制橫向排列？使文字在螢幕寬度變更時，不會自動換行

這裡是程式碼：
HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>Inspi.</title>
        <link rel ="icon" href="https://gcdnb.pbrd.co/images/qu6GMS2e9SYs.png?o=1"/>
        <link rel = "stylesheet" href="inspiMemories.css">
        <script src = "inspiMemories.js"></script>
        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    </head>
    <body>
        <nav class="nav"> 
            <a class="bar_a" id="bar_a1" aria-current="page" target='_self' href="inspi.html">部落格</a>
            <a class="bar_a" id="bar_a2" aria-current="page" target='_self' href="inspiTeach.html">教學區</a>
            <a class="bar_a" id="bar_a3" aria-current="page" target='_self' href="inspiService.html">服務</a>
            <a class="bar_a" id="bar_a4" aria-current="page" target='_self' href="aboutInspi.html">關於Inspi.</a>
            <a class="bar_a" id="bar_a5" aria-current="page" target='_self' href="inspiMemories.html">舊文回憶錄</a>
          </div>
      </nav>
      


      <div><a href="https://www.facebook.com/Inspiler/posts/147175587596715" class="tellLink" id="tell20210827">公告：即日起本網站不會再發布手機相關的資訊....     2021.08.27</a></div>
      <div><a href="https://www.facebook.com/Inspiler/posts/146462627668011" class="blogLink" id="blog20210826-1">神人成功將Linux裝在Mac系統:D     2021.08.26</a></div>
      <div><a href="https://www.facebook.com/Inspiler/posts/146365787677695" class="blogLink" id="blog20210826">舊iPhone跑太慢？將地區換到這國竟能提升效能ö     2021.08.26</a></div>
      </div>
    </body>
</html>

CSS：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}





/***WhenItLoadingh***/
.loading{
  cursor: wait;
}




/***操作區***/
img{
  user-select: none;
  -webkit-user-drag: none;
}
.nav {
  background: rgb(120, 155, 103);
  display: flex;
  align-items: center;
  user-select: none;
  -webkit-user-drag: none;
  height: 16vh;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}
.bar_a {
  color: #fff;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 19px;
  margin: 0 24px;
  font-size: 33px;
  padding: 9px 24px;
  border: 8px solid transparent;
  border-radius: 32px;
  transition: .13s;
  position: relative;
  left: 5%;
  user-select: none;
  -webkit-user-drag: none;
}
.bar_a#bar_a5 {
  border: 8px solid rgb(156, 197, 138);
  
}
.bar_a:hover {
  border-color: rgb(133, 172, 117);
}
.blogLink{
    text-decoration: none;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 28px;
    color: #75819e;
  }
  .blogLink:hover{
    color: #617ece;
    transform: 0.4s;
  }
  #blog20210826{
    position: relative;
    left: 80px;
    top: 28vh;
  }
  #blog20210826-1{
    position: relative;
    left: 80px;
    top: 43vh;
  }
  
  
  
  .tellLink{
    text-decoration: none;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 28px;
    color: #ff0000;
  }
  .tellLink:hover{
    color: #ff2424;
    transform: 0.4s;
  }
  #tell20210827{
    position: relative;
    left: 80px;
    top: 24vh;
  }

抱歉，問題蠻多的～～

ccutmis iT邦高手 2 級 ‧ 2022-05-12 15:36:03 檢舉

可以google搜'css hamburger menu' 找css手刻漢堡排選單的教學，學會後就是把它加到你的網頁裡，跟原本選單放一起，漢堡選單平常是隱藏的，當畫面寬度小於xxx時則原本選單隱藏，漢堡選單顯示，諸如此類的...
另一種偷懶的方式就是直接用現成的css框架如 Bootstrap5
裡面就有現成的範例能套用了，exam:
https://getbootstrap.com/docs/5.0/components/navbar/

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

4 個回答

小魚

iT邦大師 1 級 ‧ 2022-05-12 11:50:40

服用 box-sizing: border-box; 寬度會自動包含border, 如果還不行應該是RWD沒寫好
文字間距應該不會變大, 要自己檢查看看寫了甚麼
嘗試用 white-space: nowrap;

前端水很深,
還是多花時間學習比較實在.

回應 2
分享
檢舉

CherryYang iT邦新手 4 級 ‧ 2022-05-12 12:08:03 檢舉

謝謝，目前已經可以把字強制橫向排列了，但右上角的字（舊文...）有一部份被吃掉了，有什麼辦法嗎？

小魚 iT邦大師 1 級 ‧ 2022-05-12 15:03:27 檢舉

應該跟寬度有關係
努力學習前端,
努力學習RWD吧.

登入發表回應

Felix

iT邦研究生 2 級 ‧ 2022-05-12 11:59:53

綠色的 Border 在螢幕寬度變窄時，會超出螢幕，有什麼方法可以救嗎？

窄螢幕請考慮 RWD 設計，例如：使用窄螢幕時，選單自動轉為縱向。
當然還有很多方式，這就要考驗創意了。

螢幕寬度越窄，第二行文字和第三行文字間距會越大，該怎麼辦？

請移除下列樣式：

#blog20210826-1 {
    position: relative;
    left: 80px;
    top: 43vh;
}

如何讓導航欄裡的文字強制橫向排列？使文字在螢幕寬度變更時，不會自動換行。

同第一題的回答，窄螢幕請考慮 RWD 設計。
如果要強制不換行，請加入下方樣式：

a {
    white-space: nowrap;
}

以上。

回應 2
分享
檢舉

CherryYang iT邦新手 4 級 ‧ 2022-05-12 12:21:07 檢舉

謝謝，目前已經可以把字強制橫向排列了，但右上角的字（舊文...）有一部份被吃掉了，有什麼辦法嗎？

bsexp301479 iT邦新手 3 級 ‧ 2022-05-12 12:55:05 檢舉

css樣式新增

*{
  box-sizing:border-box;
}

試試看結果如何
文字內有兩列的可使用

<table>
  <tr>
    <td width="60%">
    公告：即日起本網站不會再發布手機相關的資訊....
    </td>
    <td width="40%">
    2021.08.27
    </td>
  </tr>
  <tr>
    <td>
    神人成功將Linux裝在Mac系統:D
    </td>
    <td>
    2021.08.26
    </td>
  </tr>
  <tr>
    <td>
    舊iPhone跑太慢？將地區換到這國竟能提升效能ö
    </td>
    <td>
    2021.08.26
    </td>
  </tr>
</table>

登入發表回應