CSS：文本的定位

我是CSS編程的初學者，對文本定位有疑問。我必須在CSS 中設計下載按鈕，其中沒有符號字體或圖像。我已經這樣做了，但文字不想放在框內（圖1）。CSS：文本的定位

這是我的CSS代碼：

#download{ 
    background-color: rgb(0, 230, 0); 
    border-top-left-radius: 100px; 
    border-top-right-radius: 100px; 
    border-bottom-left-radius: 100px; 
    border-bottom-right-radius: 100px; 
    width: 235px; 
    height: 65px; 
} 

#download p{ 
    font-family: 'Roboto Slab', serif; 
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; 
    font-size: 30px; 
    color:white; 
    padding-left: 50px; 
    padding-bottom: 300px; 
} 

#ikonad{ 
    border-radius: 150px; 
    border-color: rgb(0, 179, 0); 
    border-width: 3px; 
    border-style: solid; 
    background-color: rgb(242, 242, 242); 
    height: 58px; 
    width: 58px; 
    padding-left: 1px; 
    padding-top: 1px; 
} 
.kvadrat{ 
    width: 15px; 
    height: 20px; 
    background: rgb(0, 179, 0); 
    margin-left: 20px; 
    border-top-right-radius: 4px; 
    border-top-left-radius: 4px; 
    padding-top: 8px; 
} 
#trikotnik { 
    padding-top: 10px; 
    margin-left: 12.5px; 
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent; 
    border-right: 15px solid transparent; 
    border-top: 20px solid rgb(0, 179, 0); 
}

這是我的HTML代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<title>Gumbi</title> 
</head> 
<body> 
<div id="download"> 
<div id="ikonad"> 
<div class="kvadrat"><p>Download</p></div> 
<div id="trikotnik"></div></div> 

</div>

我會很高興，如果有人告訴我，我做錯了什麼。非常感謝你！ :)

來源

2015-11-30 ZPA

只需從<p>元素去掉保證金：

#download p { 
    margin: 0; 
}

（方的問題：什麼是padding-bottom: 300px在那裏做是不是真的有必要？）

下面是與添加的CSS您的標記規則：

#download { 
 
    background-color: rgb(0, 230, 0); 
 
    border-top-left-radius: 100px; 
 
    border-top-right-radius: 100px; 
 
    border-bottom-left-radius: 100px; 
 
    border-bottom-right-radius: 100px; 
 
    width: 235px; 
 
    height: 65px; 
 
} 
 
#download p { 
 
    font-family: 'Roboto Slab', serif; 
 
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; 
 
    font-size: 30px; 
 
    color: white; 
 
    margin: 0; 
 
    padding-left: 50px; 
 
    padding-bottom: 300px; 
 
} 
 
#ikonad { 
 
    border-radius: 150px; 
 
    border-color: rgb(0, 179, 0); 
 
    border-width: 3px; 
 
    border-style: solid; 
 
    background-color: rgb(242, 242, 242); 
 
    height: 58px; 
 
    width: 58px; 
 
    padding-left: 1px; 
 
    padding-top: 1px; 
 
} 
 
.kvadrat { 
 
    width: 15px; 
 
    height: 20px; 
 
    background: rgb(0, 179, 0); 
 
    margin-left: 20px; 
 
    border-top-right-radius: 4px; 
 
    border-top-left-radius: 4px; 
 
    padding-top: 8px; 
 
} 
 
#trikotnik { 
 
    padding-top: 10px; 
 
    margin-left: 12.5px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 20px solid rgb(0, 179, 0); 
 
}

<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'> 
 
<div id="download"> 
 
    <div id="ikonad"> 
 
    <div class="kvadrat"> 
 
     <p>Download</p> 
 
    </div> 
 
    <div id="trikotnik"></div> 
 
    </div> 
 
</div>

來源

2015-11-30 15:02:04

它的工作！謝謝！！我不敢相信！：D ...我用這段代碼試了很多東西，所以我決定嘗試填充底部。謝啦兄弟;你救了我的命！ – ZPA

CSS：文本的定位

回答

相關問題