CSS位置：為什么width屬性不適用於這些div？
[英]CSS Positioning: Why doesn't the width attribute work for these divs?
問題描述
我正在開發一個新的HTML / CSS屏幕。 我兩個領域：
- 個人細胞
- 私人郵箱
兩者都由同一個CSS類（eci_text）控制，都在div中。 輸入該類的寬度值似乎對div沒有影響。 為什么會這樣，我該怎么辦？ 我希望上面2個字符串旁邊的文本字段垂直排列（這就是為什么我要調整eci_text divs的寬度）
提前謝謝
史蒂夫
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Acme Emergency Page</title>
<style TYPE="text/css">
body
{
background-color:white;
}
#container
{
margin-left:auto;
margin-right:auto;
text-align:center;
width: 99%;
font-family:Arial,Helvetica;
font-size:10pt;
}
#eci_container
{
margin-left:auto;
margin-right:auto;
width:500px;
text-align:center;
}
.paragrah_left
{
text-align:left;
}
.eci_textfield_container
{
text-align:left;
}
.eci_text
{
text-align:left;
display:inline;
width:150px;
}
.eci_textfield
{
text-align:left;
display:inline;
}
.eci_checkbox
{
margin-left:40px;
text-align:left;
}
</style>
</head>
<body>
<div id="container">
<!-- Content: Start div content: Main content area -->
<div id="content">
<h2>ACME Emergency Contact Information </h2>
<!-- Start: ECI Container -->
<div id = "eci_container">
<p class = "paragrah_left">
This voluntary information will only be used by the ACME Emergency
Fruit & Vegetable System (FAV) to tell you about emergencies when they
arise, whether you are at work or not.
</p>
<div class = "eci_textfield_container">
<div class = "eci_text">
Personal Cell*:
</div>
<div class = "eci_textfield">
<input type = "text" name= "personal_cell_phone_number">
</div>
</div>
<div class = "eci_checkbox">
<input type = "checkbox" name = "checkBoxVisiblePersonalCellPhoneNumber">
Make my personal cell phone number visible to Mark Zuckerberg's staff
</div>
<div class = "eci_checkbox">
<input type = "checkbox" name = "checkBoxUsePersonalCellPhoneNumberForAlerts">
Use this number for ENS SMS text alerts
</div>
<p class = "paragrah_left">
If you do not want your personal cell phone used, please call
</p>
<div class = "eci_textfield_container">
<div class = "eci_text">
Personal Email*:
</div>
<div class = "eci_textfield">
<input type = "text" name= "personal_email">
</div>
</div>
<p class = "paragrah_left">
If you do not want your personal email used please call
</p>
<!-- End: ECI Container -->
</div>
<!-- Content: Close div id ="content" -->
</div>
</body>
</html>
4 個解決方案
解決方案1
4 已采納 2012-10-02 19:41:00
您是否嘗試過display：block，然后向左浮動？
解決方案2
2 2012-10-02 19:41:18
使用列表和標簽代替DIV。 DIV毫無意義。 列表和標簽是使用語義HTML的一個很好的部分。
參見： http : //www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=406
<form action="#" class="myform">
<fieldset>
<legend>Leave a Comment</legend>
<ul>
<li>
<label for="name">Name:</label>
<input id="name" />
</li>
</ul>
...等等...
解決方案3
0 2012-10-02 19:44:12
.eci_textfield_container
{
text-align:left;
float:left;
width:100%;
}
.eci_text
{
text-align:left;
display:block;
width:150px;
float:left;
}
.eci_textfield
{
text-align:left;
display:block;
float:left;
}
解決方案4
0 2012-10-02 19:44:14
寬度將應用於包含字段標簽的兩個div。 如果您在Firefox中使用Firebug擴展，則可以檢查該元素，並查看標簽是否是您在CSS中指定的寬度（150像素）。 您實際上在哪個瀏覽器中看到此問題？
另外，對於字段標簽，您應該使用標簽。
為什么沒有width的label的width CSS屬性不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.