Question

我是HTML和CSS的初学者。每当有人拖动角落以使页面变大或变小时，我页面上的文字就会不断跳跃。我宁愿让它全部不动，也不要动一下。现在，菜单文本跳出菜单栏。我该如何解决？我试过玩“位置”属性，你会在下面看到......但没有骰子......

HTML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" Inherits="Foods.MainPage" %>
<!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 runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link id="Link1" rel="stylesheet" type="text/css" href="Styles/addProjectStyle.css"/>
    <style type="text/css">
        .addProject
        {
            width: 78px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">

        <div class = "navigationBar">
            <asp:ImageButton ID="ImageButton1" runat="server" Height="18px" 
                ImageUrl="~/g.png" style="margin-left: 1012px; margin-top: 18px" 
                Width="23px" />

            <div id = "search" class = "menuOption" >
            <a href=""> Search </a>
            </div>

            <div id = "reports" class = "menuOption" >
            <a href=""> Reports </a>
            </div>

            <div id = "more" class = "menuOption" >
            <a href=""> More... </a>
            </div>

            <div id = "addProject" class = "menuOption" >
            <a href=""> Add Project </a>
            </div>


            <div id = "editProject" class = "menuOption" >
            <a href=""> Edit Project </a>
             </div>
            </div>




        <div id = "title" class = "mainTitle">
            &nbsp;&nbsp;&nbsp;
            Dare Foods
        </div>

         <div id = "sub" class = "subTitle">
            &nbsp;&nbsp;&nbsp;
            Add Project
        </div>

          <div id = "addBtn" class= "addButton">
          Add
       </div>

        <div class = "addProjectArea" >

            <div class = "addProjectInner" >
            </div>

        </div>

    </form>
        </body>
</html>

CSS

body 
{

    position: static;
    background: white;
}

input 
{

    font-style: italic; 
    font: Ariel; 
    font-size: 14pt; 
    margin-top: 7px;
}

a:hover
{
    text-decoration:none;
    color: #B9D3EE; 
}
a:active
{
    text-decoration:none;
    color: #B9D3EE; 
}
a
{
    text-decoration:none;
    color: white; 
}
.navigationBar
{

    background: gray; 
    height: 50px; 
    width: 100%;
}
.menuOption
{

    width:143px;
    text-align: center;  
    position: static;   
    float:left;

}
#search
{
     position:relative; 
    font-weight: bold; 
    height: 27px;
    margin-left: 23px;
    left: 133px;
    top: -17px;
    margin-top: 1px;
}
#reports
{
    position:relative; 
   font-weight: bold; 
    height: 27px;
    margin-left: 23px;
    left: 34px;
    top: -16px;
    margin-top: 1px;
}
#addProject
{
     position:relative; 
     font-weight: bold; 
   height: 27px;
    margin-left: 23px;
    left: -542px;
    top: -18px;
    margin-top: 1px;
}
#editProject
{
     position:relative; 
    font-weight: bold; 
    height: 27px;
    margin-left: 23px;
    left: -611px;
    top: -18px;
    margin-top: 1px;
}
#more
{
     position:relative; 
    font-weight: bold; 
    height: 27px;
    margin-left: 23px;
    left: -66px;
    top: -15px;
    margin-top: 1px;
}
.addProjectArea
{
    background:lightGray; 
    position:absolute; 
    top: 21%; 
    width:50%;
    height:50%;  
    padding-bottom: 15%;  
    margin-left: 30%;
    margin-right: 10%;
    text-align: center;
    border-width: 5%; 
    border-style:solid; 
    border-color:#8E388E; 
}

.addProjectInner
{


    background: white; 
    width:85%;
    height:90%;  
    padding-bottom: 15%;  
    margin-left: 7.5%;
    margin-right: 100px;
    text-align: center;
    background: white;
    margin-top: 55px;
    border-width: 5%; 
    border-style:solid; 
    border-color:#8E388E; 
}
.mainTitle
{
    position:static; 
    background: white; 
    width:15%;
    height:4px;  
    padding-left: 5%; 
    padding-bottom: 15%;  
    text-align: left;
    background: white;

}
#title
{
    position:absolute;
    color:Red;
    width:49%;
    font-size:35pt; 
    font-weight:lighter; 
    font-style:italic; 
    font-family:Georgia;
    margin-left: 0px;
    margin-top: 21px;
}
#sub
{
    position:absolute;
    color:Black;
    font-size: 25pt; 
    font-style:italic; 
    font-family:Buxton Sketch;
    width: 22%;
    height: 0%;
    top: 113px;
    left: 249px;
    text-align: left; 
}
.addButton
{
    margin-top: 5%; 
    background:gray; 
    position:absolute; 
    width:15%;
    height:6%; 
    margin-left: 65%;
    text-align: center;
}
#addBtn
{
    font-size: 20pt;
    font-family:Gabriola;  
    color:White;
    font-weight: bold;
    top: 48px;
    left: 5px;
}

img.home
{
    position:relative; 
    width:46px;
    height:44px;
    background:url(g.png) 0 0;
}

Answer 1

尝试在.navigationBar中添加最小宽度。当您指定float：left时，如果容器太小而无法包含它们，它将包装元素。通过指定最小宽度，您应该能够避免该问题。看到这个jsfiddle：http://jsfiddle.net/ZkLFV/

Answer 2

一个很好的方法是将所有内容放入div中，然后对此div的宽度进行spcify并允许它在中间浮动。这就是很多网站处理这类事情的方式，所以：

    <div class="container">

<!-- put everything above here-->
    </div>

    .container
    {
    width:400px;
    margin-left:auto;
    margin-right:auto;
    }

这样你的alwasy处理一个设定的大小，但它在页面中间很好看

Answer 3

您可以操纵不属于身体的滚动条，在身体后面做一个div，使它100％的身体，css {溢出：滚动;或者溢出-y：滚动;}并在跟踪器上使用rgba（alpha）。

在html页面上移动文本

3 个答案: