html - css居中正在影响小部件

标签 html css

出于某种原因，我的 css 居中代码与小部件混淆。小部件被向下推到列下方。此外，导航栏小部件位于论坛的所有页面上。

我真的非常感谢任何帮助。谢谢。

问题图片:http://i1335.photobucket.com/albums/w662/dnpranks/Untitled15_zps89a1c5e9.png

~小部件应该更靠上，紧挨着列。

下面是导致问题的列的代码:

HTML:

<!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=utf-8" />
<title>Pricies Table</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/style_price_table_dark.css" />
</head>

<body>
   <div class="left">
        <div class="pricing_table_row">
        <div class="first_child">
            <div class="title_first_colum"><center><img src="http://i1335.photobucket.com/albums/w662/dnpranks/_slotbutton__zpsb8778ee4.png"></center></div>
        </div>
        <ul>
            <li class="first_colum"><img src="http://i.imgur.com/4IOlEBU.png"></li>
            <li class="first_colum black"><img src="http://i.imgur.com/FrohEbX.png"></li>
            <li class="first_colum"><img src="http://i.imgur.com/GnnOkkw.png"></li>
            <li class="first_colum"><img src="http://i.imgur.com/pvJPDni.png"></li>
            <li class="first_colum"><img src="http://i.imgur.com/xux1rsZ.png"></li>
            <li class="first_colum"><img src="http://i.imgur.com/Krg86nA.png"></li>
            <li class="first_colum"><img src="http://i.imgur.com/6yBmM4e.png"></li>
            <li class="first_colum"><img src="http://i.imgur.com/4D1nzMY.png"></li>
            <li class="first_colum"><img src="http://i.imgur.com/ZFtOSeS.png"></li>
        </ul>
    </div>
    <div class="ptable">
    <div class="pricing_table_row">
        <div class="first_child">
            <div class="title">Bet</div>
            <div class="price">100<br /><span class="small">DP</span></div>
        </div>
        <ul>
            <li><center><div class="colorletter"><strong><br>600</br></strong></center></li>
            <li><center><div class="colorletter"><strong><br>400</br></strong></center></li>
            <li><center><div class="colorletter"><strong><br>300</br></strong></center></li>
            <li><center><div class="colorletter"><strong><br>200</br></strong></center></li>
            <li><center><div class="colorletter"><strong><br>200</br></strong></center></li>
            <li><center><div class="colorletter"><strong><br>100</br></strong></center></li>
            <li><center><div class="colorletter"><strong><br>-50</br></strong></center></li>
            <li><center><div class="colorletter"><strong><br>-100</br></strong></center></li>
            <li><center><div class="colorletter"><strong><br>-200</br></strong></center></li>
        </ul>
    </div>

    <div class="pricing_table_row">
        <div class="first_child">
            <div class="title">Bet</div>
            <div class="pricet">75<br /><span class="small">DP</span></div>
        </div>
        <ul>
            <li><div class="colorlettert"><center><strong><br>400</br></strong></center></li>
            <li><div class="colorlettert"><center><strong><br>300</br></strong></center></li>
            <li><div class="colorlettert"><center><strong><br>200</br></strong></center></li>
            <li><div class="colorlettert"><center><strong><br>150</br></strong></center></li>
            <li><div class="colorlettert"><center><strong><br>150</br></strong></center></li>
            <li><div class="colorlettert"><center><strong><br>75</br></strong></center></li>
            <li><div class="colorlettert"><center><strong><br>-50</br></strong></center></li>
            <li><div class="colorlettert"><center><strong><br>-75</br></strong></center></li>
            <li><div class="colorlettert"><center><strong><br>-150</br></strong></center></li>
        </ul>        
    </div>

    <div class="pricing_table_row">
        <div class="first_child">
            <div class="title">Bet</div>
            <div class="pricew">50<br /><span class="small">DP</span></div>
        </div>
        <ul>
            <li><center><div class="colorletterw"><strong><br>300</br></strong></center></li>
            <li><center><div class="colorletterw"><strong><br>200</br></strong></center></li>
            <li><center><div class="colorletterw"><strong><br>150</br></strong></center></li>
            <li><center><div class="colorletterw"><strong><br>100</br></strong></center></li>
            <li><center><div class="colorletterw"><strong><br>100</br></strong></center></li>
            <li><center><div class="colorletterw"><strong><br>50</br></strong></center></li>
            <li><center><div class="colorletterw"><strong><br>-25</br></strong></center></li>
            <li><center><div class="colorletterw"><strong><br>-50</br></strong></center></li>
            <li><center><div class="colorletterw"><strong><br>-75</br></strong></center></li>
        </ul>        
    </div>  

  <div class="left">
  <form method="post" action="/posting.forum" onsubmit="return vB_Editor['text_editor'].prepare_submit(0, 0)" name="post" id="quick_reply">

   <div style="clear: both; margin-left: auto; width: 150px; margin-right: auto; height: 169px;" id="textarea_content">
       <textarea editorid="text_editor" cols="50" rows="10" name="message" style="font-size: 1.0m;" id="text_editor_textarea" class="inputbox">Bet Amount: </textarea> 
   </div>

    <center>
       <input type="hidden" name="mode" value="reply" /><input type="hidden" name="sid" value="26766" /><input type="hidden" name="t" value="3671" /><br /><input onclick="confirm('Make sure that the requested item(s) is(are) in the Supreme Market list and that you have sufficient amount Duel Points for it.');" type="submit" class="button1" value="Send" name="post" /> 
    </center>

</form>


</body>
</html>

CSS:

/*
DICE GAME TABLE
*/

/* Elements styles */
.pricing_table_row {
    list-style:none;
    float:left;
    width:245px;
    margin:0px;
    padding:3px;
    text-align:center;
    background-color:#444444;
    font-family: 'Open Sans Condensed', sans-serif;
}
.left {
margin: 0 auto;
text-align:center;
width:1024px;
min-width:auto;
overflow: hidden;
}
.right {
        margin-left: -28%;
}
.pricing_table_row ul {
    list-style:none
    width:232px;
    margin:3;
    padding:3px;
    text-align:center;
    background-color:#444444;
    font-family: 'Open Sans Condensed', sans-serif;
}
.pricing_table_row ul {
    list-style:none;
    float:left;
    width:232px;
    margin:0;
    padding:3px;
    text-align:center;
    background-color:#444444;
    font-family: 'Open Sans Condensed', sans-serif;
}

.pricing_table_row ul li {
    border:1px solid #5b5b5b;
    background-color: #2c2c2c;
    margin-top:6px;
  width: 232px;
    height: 101px;
    display: block;
    line-height: 30px;
    color: #FFFFFF;
}

.pricing_table_row ul li {
    font-size:50px;
    height: 101px;
}
.first_child{
    margin-top:6px; 
    border: 2px solid #5b5b5b;
    font-size:50px;
    font-weight:bold;
    height: 159px;
    background-color: #2c2c2c;
    text-align:center;
    width: 230px;
    margin: 4px;
}

.last_child{
    float:left;
    margin-top: 6px;
    margin-left: 3px; 
    border: 1px solid #5b5b5b;
    font-size:18px;
    font-weight:bold;
    height: 120px;
    width: 232px;
    background-color: #2c2c2c;
    text-align:center;
}

.title{
    font-family: 'Open Sans Condensed', serif;
    font-weight: 300;
    height: 41px;
    width: 212px;
    margin: 10px 9px 9px 9px;
    padding-top: 0px;
    font-size: 28px;
    color: #ffffff;
    background-color: #91040b;
}
.title_first_colum{
    font-family: 'Open Sans Condensed', serif;
    font-weight: 300;
    color: #01b8e2;
    height: 159px;
    width: 232px;
    margin:0;
    padding-top: 15px;
    font-size: 28px;
}
.price{
    padding-top: 13px;
    color: #6e8c92;
    background-color: #000000;
    font-weight: 700;
    height: 75px;
    width: 212px;
    margin: 9px;
    font-size: 50px;
    line-height: 34px;
}
.pricet{
  padding-top: 13px;
    color: #ff0000;
    background-color: #000000;
    font-weight: 700;
    height: 75px;
    width: 212px;
    margin: 9px;
    font-size: 50px;
    line-height: 34px;
}
.pricew{
  padding-top: 13px;
  color: #ff6600;
    background-color: #000000;
    font-weight: 700;
    height: 75px;
    width: 212px;
    margin: 9px;
    font-size: 50px;
    line-height: 34px;
}
.colorletter{
    font-family: 'Open Sans Condensed', serif;
  font-weight: 300;
  font-size: 50px;
    color: #6e8c92;
}
.colorlettert{
    font-family: 'Open Sans Condensed', serif;
  font-weight: 300;
  font-size: 50px;
  color: #ff0000;
}
.colorletterw{
    font-family: 'Open Sans Condensed', serif;
  font-weight: 300;
  font-size: 50px;
  color: #ff6600;
}


.price_small{
    color: #01b8e2;
    padding-top: 13px;
    font-weight: 700;
    height: 67px;
    width: 232px;
    margin: 10px;
    font-size: 25px;
    line-height: 18px;
}

.subprice{
    font-family: 'Open Sans Condensed', serif;
    font-weight: 300;
    font-size: 50px;
    color: #FFFFFF;
}
.subprice_small{
    font-family: 'Open Sans Condensed', serif;
    font-weight: 700;
    font-size: 25px;
    color: #FFFFFF;
}
.small{
    font-family: 'Open Sans Condensed', serif;
    font-weight: 300;
    font-size: 15px;
    color: #FFFFFF;
}
.list_check {
    background:url(../images/icon_check_dark.png) 0 0 no-repeat;
    background-position: center;
    }
.list_x {
    background:url(../images/icon_x_dark.png) 0 0 no-repeat;
    background-position: center;
    }
.button{
    font-family: 'Open Sans Condensed', serif;
    font-weight: 700;
    font-size: 17px;
    margin-top: 10px;
    border: none;
    height: 30px;
    width: 232px;
    color: #FFFFFF;
    background-color: #01b8e2;
}
.button:hover{
    font-family: 'Open Sans Condensed', serif;
    font-weight: 700;
    font-size: 17px;
    margin-top: 10px;
    border: none;
    background-color: #000000;
    height: 30px;
    width: 232px;
    color: #FFFFFF;
}
.first_colum{
  text-align: left;
    padding-left: 0px; 
}
.black{
    background-color: #000000;
}

最佳答案

尝试在您的 HTML 代码末尾附近删除此 clear:both，看看是否能解决问题。没有看到实时代码，我无法确定它是否会修复它，但我自己在 clear 下推其他内容时遇到了非常相似的问题。

改变:

   <div style="clear: both; margin-left: auto; width: 150px; margin-right: auto; height: 169px;" id="textarea_content">
       <textarea editorid="text_editor" cols="50" rows="10" name="message" style="font-size: 1.0m;" id="text_editor_textarea" class="inputbox">Bet Amount: </textarea> 
   </div>

收件人:

   <div style="margin-left: auto; width: 150px; margin-right: auto; height: 169px;" id="textarea_content">
       <textarea editorid="text_editor" cols="50" rows="10" name="message" style="font-size: 1.0m;" id="text_editor_textarea" class="inputbox">Bet Amount: </textarea> 
   </div>

关于html - css居中正在影响小部件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22336368/

上一篇：html - 当 h3 标题分成 2 行时，它们会跳转到整个容器宽度

下一篇：css - 如何将图像保存到临时文件以备后用？

相关文章：

javascript - 如何将 HTML 作为字符串传递到 TextArea

html - 悬停 div 时更改跨度字体颜色和背景封面

html - 我可以使用元素的属性来创建样式规则吗？

javascript - 使 Div 在滚动时滑开

html - 如何使用 HTML/CSS 根据内容高度放置响应式背景？

javascript - 浏览图像并插入 Iframe

html - ul 传播并覆盖 CSS(也需要垂直滚动条)

javascript - 创建具有响应式样式的弹出窗口

html - 我可以让浏览器窗口从页面底部开始吗？

css - 为所有页面固定 Tesseract 主题标题

©2024 IT工具网  联系我们