調整HTML文本/元素大小的問題

Question

然後我想並排放置兩個文本，並通過設置width和display: inline-block來做到這一點。

問題是，當我在Chrome中調整頁面大小時，而不是停留在中心位置，文本塊浮動得越多，大小就越大。

我試着改變邊距，填充到自動或自定義，我試着把一個包裝，但絕不會讓他們不動。我發現有關調整大小的東西，但每個主題都有自己的例子，這不適用於我的網站。

.contactnumber { 
 
\t font-family: "Raleway", sans-serif; 
 
\t font-size: 50px; 
 
\t font-weight: 100; 
 
} 
 
#condesc { 
 
\t display: inline-block; 
 
\t font-family: "Raleway", sans-serif; 
 
\t font-size: 50px; 
 
\t font-weight: 100; 
 
} 
 
.pcontactnumber { 
 
\t position: inherit; 
 
\t font-family: "Raleway", sans-serif; 
 
\t font-size: 25px; 
 
\t font-weight: bold; 
 
} 
 
.adresa { 
 
\t position: inherit; 
 
\t display: inline-block; 
 
\t font-family: "Raleway", sans-serif; 
 
\t font-size: 50px; 
 
\t font-weight: 100; 
 
} 
 
.padresa { 
 
\t display: inline-block; 
 
\t float: right; 
 
\t width: 640px; 
 
\t font-family: "Raleway", sans-serif; 
 
\t font-size: 25px; 
 
\t font-weight: bold; 
 
}

<h3 id="condesc" style="width: 615px">Phone numbers</h3> 
 
<h4 class="adresa">Adress:</h4> 
 
<p class="padresa">Rruga (this is my address), x/a, Prizren 20040</p> 
 
<p class="pcontactnumber" style="width: 163px">049/xxx-yyy</p> 
 
<p class="pcontactnumber" style="width: 160px">049/yyy-xxx</p> 
 
<p class="pcontactnumber" style="width: 153px">044/xyx-yxy</p>

這是初學者的東西，但我剛開始對HTML/CSS，這是我的第一個適當的項目。謝謝！

Answer 1

如何在每個塊上組合媒體查詢和width: 50%？

.contactnumber { 
 
    font-family: "Raleway", sans-serif; 
 
    font-size: 50px; 
 
    font-weight: 100; 
 
} 
 
#condesc { 
 
    display: inline-block; 
 
    font-family: "Raleway", sans-serif; 
 
    font-size: 50px; 
 
    font-weight: 100; 
 
} 
 
.pcontactnumber { 
 
    position: inherit; 
 
    font-family: "Raleway", sans-serif; 
 
    font-size: 25px; 
 
    font-weight: bold; 
 
} 
 
.adresa { 
 
    position: inherit; 
 
    display: inline-block; 
 
    font-family: "Raleway", sans-serif; 
 
    font-size: 50px; 
 
    font-weight: 100; 
 
} 
 
.padresa { 
 
    display: inline-block; 
 
    width: 640px; 
 
    font-family: "Raleway", sans-serif; 
 
    font-size: 25px; 
 
    font-weight: bold; 
 
} 
 
.half { 
 
    width: 50%; 
 
    float: left; 
 
} 
 
@media(max-width: 768px) { 
 
    .half { 
 
    width: 100%; 
 
    float: none; 
 
    } 
 
}

<div class="half"> 
 
    <h3 id="condesc">Phone numbers</h3> 
 
    <p class="pcontactnumber" style="width: 163px">049/xxx-yyy</p> 
 
    <p class="pcontactnumber" style="width: 160px">049/yyy-xxx</p> 
 
    <p class="pcontactnumber" style="width: 153px">044/xyx-yxy</p> 
 
</div> 
 
<div class="half"> 
 
    <h3 class="adresa">Adress:</h3> 
 
    <p class="padresa">Rruga (this is my address), x/a, Prizren 20040</p> 
 
</div>

Answer 2

放入一個DIV中的所有文本，並給它

div { 
    display: block; 
    margin: 0 auto; 
} 

這應該居中文本，並讓他們在中心

Answer 3

您可以嘗試的選擇添加div和屬性顯示：flex

.contactnumber { 
 
\t font-family: "Raleway", sans-serif; 
 
\t font-size: 50px; 
 
\t font-weight: 100; 
 
} 
 
#condesc { 
 
\t display: inline-block; 
 
\t font-family: "Raleway", sans-serif; 
 
\t font-size: 50px; 
 
\t font-weight: 100; 
 
} 
 
.pcontactnumber { 
 
\t position: inherit; 
 
\t font-family: "Raleway", sans-serif; 
 
\t font-size: 25px; 
 
\t font-weight: bold; 
 
} 
 
.adresa { 
 
\t position: inherit; 
 
\t display: inline-block; 
 
\t font-family: "Raleway", sans-serif; 
 
\t font-size: 50px; 
 
\t font-weight: 100; 
 
} 
 
.padresa { 
 
\t display: inline-block; 
 
\t float: left; 
 
\t width: 100%; 
 
\t font-family: "Raleway", sans-serif; 
 
\t font-size: 25px; 
 
\t font-weight: bold; 
 
} 
 
.phone { 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.block-flex { 
 
    display: flex; 
 
    justify-content: space-around; 
 
}

<div class="block-flex"> 
 
    <h3 id="condesc">Phone numbers</h3> 
 
    <h4 class="adresa">Adress:</h4> 
 
</div> 
 
<div class="block-flex"> 
 
    <div class="phone"> 
 
    <p class="pcontactnumber">049/xxx-yyy</p> 
 
    <p class="pcontactnumber">049/yyy-xxx</p> 
 
    <p class="pcontactnumber">044/xyx-yxy</p> 
 
    </div> 
 
    <div> 
 
    <p class="padresa">Rruga (this is my address), x/a, Prizren 20040</p> 
 
    </div> 
 
</div>

Answer 4

首先，因爲你開始learninig HTML/CSS，這裏是關於CSS的一些技巧：

1 - 類（如」。我級）的意思是所以我鼓勵您將可重用的CSS規則重新組合爲一個或多個類，並將這些類添加到共享相同參數的所有元素，而不是在每個類上重複相同的規則。

請記住，您可以將多個類添加到單個元素。

如果您需要特定元素的特定CSS規則，則使用專用於此元素的「id」。

從長遠來看，維護起來會更容易。

2 - 儘量避免使用樣式attribut將CSS規則添加到元素。這不是一個好主意，因爲你混合了東西（結構：HTML和佈局/設計：CSS）。這可能會讓瀏覽器感到困惑。

3 - 當您希望佈局響應時，嘗試使用mobile first方法。基本上，你只是開始設計最小的設備，然後添加規則來更新元素應該如何顯示通過media query

這是一個例子，你如何創建一個簡單的「網格」，顯示所有元素作爲列表，然後重新排序他們在大屏幕上時。

你可以看看CSS框架，如bootstrap這offert與許多人沿着這類型的結構。

body { 
 
\t font-family: "Raleway", sans-serif; 
 
} 
 

 
.row { 
 
\t display: block; 
 
\t position: relative; 
 
} 
 

 
.col-12, 
 
.col-13, 
 
.col-14, 
 
.col-34 { 
 
\t margin-left: 1%; 
 
\t margin-right: 1%; 
 
\t widht: 100%; 
 
} 
 

 
@media screen and (min-width: 480px) { 
 

 
\t .row div { 
 
\t \t float: left; 
 
\t } 
 

 
\t .col-12 { 
 
\t \t width: 48%; 
 
\t } 
 

 
\t .col-13 { 
 
\t \t width: 31%; 
 
\t } 
 

 
\t .col-14 { 
 
\t \t width: 23%; 
 
\t } 
 

 
\t .col-34 { 
 
\t \t width: 73%; 
 
\t } 
 
}

<div class="row"> 
 
\t <div class="col-12"> 
 
\t \t <h3>Phone numbers</h3> 
 
\t \t <p><strong>049/xxx-yyy</strong></p> 
 
\t \t <p><strong>049/yyy-xxx</strong></p> 
 
\t \t <p><strong>044/xyx-yxy</strong></p> 
 
\t </div> 
 
\t <div class="col-12"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-14"> 
 
\t \t \t \t <h4 class="address">Adress:</h4> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-34"> 
 
\t \t \t \t <p class="">Rruga (this is my address), x/a, Prizren 20040</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>