在html页面上移动文本_Html_Css

在html页面上移动文本

html css

在html页面上移动文本,html,css,Html,Css,我是HTML和CSS的初学者。每当有人拖动墙角使页面变大或变小时，我的页面上的文本就一直在跳来跳去。我更希望这一切都不要乱动，或者稍微动一下。现在，菜单文本直接跳出菜单栏。我该如何解决这个问题？我尝试过使用“位置”属性，如下所示。。。但是没有骰子 html <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" Inherits="Foods.MainPage" %> <!DOCTY

我是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>

尝试向.navigationBar添加最小宽度。当您指定float:left时，如果容器太小而无法容纳元素，它将包装这些元素。通过指定最小宽度，您应该能够避免该问题。看到这个jsFoDels:

一个很好的方法是把所有的内容放入div中，然后使这个div的宽度变宽，并允许它在中间浮动。很多网站都是这样处理这类事情的，所以：

    <div class="container">

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

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


.集装箱
{
宽度：400px；
左边距：自动；
右边距：自动；
}

这样，你就可以处理一个集合的大小，但是它在页面的中间位置很好，

你可以操纵不是身体的一部分的滚动条，

在主体之后创建一个div，使其100%位于主体，css{overflow:scroll；或overflow-y:scroll；}并在跟踪器上使用rgba（alpha）。

这与asp.net或webforms完全无关。我放置标签是因为我使用的是webforms和asp.net。。。这只是为了提供更多的背景首先，我建议你建立一个无序列表菜单<代码>

搜索
报告

它们易于设置样式。如果您想要水平菜单，请将float:left置于

li

上。除此之外，请使用W3C在线验证程序检查您的页面。你的代码中有很多错误。我删除了标签，因为它们与您的问题无关。同时删除百分比-这些是导致“响应性”设计的原因。

    <div class="container">

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

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