添加样式时,链接显示在两行上

时间:2017-03-29 10:07:44

标签: html css

谢谢大家的时间。

我正在尝试做一些简单的事情,但事实证明它太复杂了。 我需要一个链接来发送电子邮件,但样式有一些问题。它显示内容断裂(见jsfiddle)。但是当我右键点击几次时,一切都恢复正常。有什么想法吗?

 protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        List<string> lst = new List<string>() { "asd", "xxx" };
        GridView1.DataSource = lst;
        this.BindGrid();
    }


}
protected void btnpreviewwebsite_Click1(object sender, EventArgs e)
{
    Response.Redirect("~/index.aspx");
}
protected void btnlogout_Click(object sender, EventArgs e)
{
    Session.Abandon();
    Session.Clear();
    Response.Redirect("~/Admin Panel/LoginForm.aspx");

}
private void BindGrid()
{

    using (SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=D:\PROJECT SEM6\Online Tours and Travels\App_Data\ToursandTravels.mdf;Integrated Security=True;User Instance=True"))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT packagename,name, gender,mobileno,email,noofdays,child,adults FROM enquiry"))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
            }
        }
    }
}
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{



    if (e.CommandName == "MYCOMMAND")
    {
        SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=D:\PROJECT SEM6\Online Tours and Travels\App_Data\ToursandTravels.mdf;Integrated Security=True;User Instance=True");
        string sql;
        Button Button1 = (Button)e.CommandSource;
        if (Button1 != null)
            Button1.Text = "Confirm";
        sql = "update enquiry set statusfield='" + Button1.Text + "'";

        SqlCommand comm = new SqlCommand(sql, con);

        con.Open();
        comm.ExecuteNonQuery();

    }
}
.sendAll {
    float: right;
    margin-right: 10%;
    margin-bottom: 3%;
    margin-top: 2%;
    display: inline-block;
}

#sendAll {
    color: white;
    padding: 7% 25%;
    background-color: #0080FF;
    display: inline-block;
}

#sendAll:hover {
    background-color: #0164c6;
}

这是jsfiddle link

谢谢大家!

3 个答案:

答案 0 :(得分:0)

只需向display: block

提供#sendAll即可

<b>标记为元素提供font-weight: bold属性,但该元素本身不是块级元素。因此,您必须手动指定相同的内容。

参考代码:

.sendAll {
  float: right;
  margin-right: 10%;
  margin-bottom: 3%;
  margin-top: 2%;
  display: inline-block;
}

#sendAll {
  color: white;
  padding: 7% 25%;
  background-color: #0080FF;
  display: block;
}

#sendAll:hover {
  background-color: #0164c6;
}
<div class="sendAll">
  <a href="#">
    <b id="sendAll">Send Email to All Selected</b>
  </a>
</div>

答案 1 :(得分:0)

试试这个:

.sendAll {
    float: right;
    margin-right: 10%;
    margin-bottom: 3%;
    margin-top: 2%;
    display: inline-block;
}

#sendAll {
    color: white;
    padding: 7% 25%;
    background-color: #0080FF;
    display: inline-block;
    white-space:nowrap;
}

#sendAll:hover {
    background-color: #0164c6;
}

<强>解释white-space:nowrap id

中添加媒体资源#sendAll

update code link

答案 2 :(得分:0)

如果您希望文字仅在一行上,请将以下内容添加到#sendAll

white-space: nowrap;