محاذاة الأزرار button بجانب بعضها في css align horizontal

Mohammed Hhhh · 17 مارس 2022

السلام عليكم و رحمة الله وبركاته لدي مشكلة في الزرين زر view و delet

اود ان اجعلهما بجانب بعض لا تحت بعضهما البعض كيف اقوم بذلك

و شكرا.......

كود html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/Examples/cssPage.css">
    <title>Examples</title>
</head>

<body>
    <h1>this is my site</h1>
    <table>
        <thead>
            <tr>
                <td>Avatar</td>
                <td>Groub</td>
                <td>Name</td>
                <td>Points</td>
                <td>Control</td>
            </tr>
        </thead>
        <tbody>
        <!-- 1 -->

            <tr class="one">
                <td><img src="../Html Required/python.png" alt=""></td>
                <td>Python Programmer</td>
                <td>Osama Issa</td>
                <td>120</td>
                <td class="control">
                    <button>    View </button>
                    <button class="two"> Delet </button>
                </td>
            </tr>
        <!-- 2 -->

            <tr class="one">
                <td><img src="../Html Required/js.png" alt=""></td>
                <td rowspan="2">Java Script and Python Programmers</td>
                <td>Hamed mahmoud</td>
                <td>180</td>
                <td class="control">
                    <button>View</button>
                    <button class="two">Delet</button>
                </td>
            </tr>
        <!-- 3 -->
            <tr class="one">
                <td><img src="../Html Required/python.png" alt=""></td>
                
                <td>Khaled abd alrhman</td>
                <td>130</td>
                <td class="control">
                    <button>View</button>
                    <button class="two">Delet</button>
                </td>
            </tr>
        <!-- 4 -->
            <tr class="one">
                <td><img src="../Html Required/js.png "></td>
                <td>Java Script Programmer</td>
                <td>kmal rmadan</td>
                <td>140</td>
                <td class="control">
                    <button>View</button>
                    <button class="two">Delet</button>
                </td>
            </tr>
        <!-- 5 -->
            <tr class="one">
                <td><img src="../Html Required/js.png" alt=""></td>
                <td>Java Script Programmer</td>
                <td>Adel Youef</td>
                <td rowspan="2">190</td>
                <td>
                    <button>View</button>
                    <button class="two">Delet</button>
                </td>
            </tr>
        <!-- 6 -->
            <tr class="one">
                <td><img src="../Html Required/js.png" alt=""></td>
                <td>Python Programmer</td>
                <td>Amr mohammed</td>
                
                <td >
                    <button>View</button>
                    <button class="two">Delet</button>
                </td>
            </tr>
        </tbody>

    </table>
</body>

</html>

كود css

body{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
}

h1{
    font-size: 80px ;
    text-align: center ;
}

table{
    height: 400px ;
    width: 700px ;
    margin: 20px auto ;
    /* background-color: rgb(243, 243, 243); */
    /* border: solid rgb(197, 197, 197) 3px ; */
    text-align: center ;
    font-size: 20px ;
}

thead{
    background-color: rgb(92, 92, 92) ;
    border-color: red ;
    font-weight : bold ;
    color: rgb(255, 255, 255);
}

.one{
    background-color: rgb(223, 223, 223);
}
td{
    padding: 17px ;
    margin : 8px ; 
    /* border: 0.5px solid rgb(214, 214, 214); */
}

button{
    background-color: rgb(255, 41, 148);
    border: none;
    color: white;
    padding: 1px;
    margin: -1px;
    width: 34px;
    border-radius: 3px ;
    cursor: cell;
}
.two{
    background-color: rgb(48, 145, 255) ;

}

تم التعديل في 17 مارس 2022 بواسطة Wael Aljamal
توضيح السؤال

محمد أبو عواد · 17 مارس 2022

حاول احاطتهما بحاوية لها تنسيق display وقيمته flex كالتالي

<td class="control">
  <div style="display:flex">
    ^^^^^^^^^^^^^^^^^^^^^^^
    <button>عرض</button>
    <button>حذف</button>
  </div>
  ^^^^^^^^
</td>

وأخبرنا بالنتيجة

Wael Aljamal · 17 مارس 2022

يمكنك استخدام التالي كعنصرين إدخال input:

<div>
	<input type="button" value="button1" class="app-button" />
  	<input type="button" value="button2" />
</div>

و التنسيق:

div { 
  padding: 10px;
  border: 1px solid black;
}

input { 
	margin: 0;
}

.app-button:first-of-type {
    margin-right:15px;
 }

آخر تنسيق لإبعاد الزرين عن بعضهما

محاذاة الأزرار button بجانب بعضها في css align horizontal

السؤال

Mohammed Hhhh

2 أجوبة على هذا السؤال

Recommended Posts

محمد أبو عواد

Wael Aljamal

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية